@iress-oss/ids-components 6.0.0-alpha.8 → 6.0.0-alpha.9

package/dist/components/Slideout/components/SlideoutInner.js

@@ -1,45 +1,45 @@
 import { jsxs as c, jsx as d } from "react/jsx-runtime";
 import { propagateTestid as o } from "../../../helpers/utility/propagateTestid.js";
-import "../../../Button-B4nt3P1v.js";
+import "../../../Button-BkufphWK.js";
 import { IressCloseButton as j } from "../../Button/CloseButton/CloseButton.js";
 import { slideout as v } from "../Slideout.styles.js";
-import { s as f } from "../../../factory-oPXoMw9H.js";
-import { s as B } from "../../../is-valid-prop-Ce0wiweq.js";
+import { s as f } from "../../../factory-CWvlR9Yh.js";
+import { s as B } from "../../../is-valid-prop-DI4RCMon.js";
 import { IressText as _ } from "../../Text/Text.js";
-const F = ({
+const g = ({
   children: u,
   closeText: x,
   "data-testid": t,
   floatingRef: y,
   footer: e,
-  heading: P,
-  onOpenChange: b,
-  className: h,
-  ...C
+  heading: I,
+  onOpenChange: N,
+  className: P,
+  ...S
 }) => {
-  const s = v(), [I, N] = B(C), {
+  const s = v(), [b, h] = B(S), {
     p: r = "md",
-    pt: p,
-    pl: n,
+    pt: n,
+    pl: p,
     pr: i,
     pb: l,
     px: m,
     py: a,
-    ...S
-  } = I;
+    ...C
+  } = b;
   return /* @__PURE__ */ c(
     f.div,
     {
       ref: y,
       "data-testid": t,
-      className: h,
-      ...N,
-      ...S,
+      className: P,
+      ...h,
+      ...C,
       children: [
         /* @__PURE__ */ d(
           j,
           {
-            onClick: () => b(!1),
+            onClick: () => N(!1),
             screenreaderText: x,
             className: s.closeButton,
             "data-testid": o(t, "close-button__button")
@@ -52,13 +52,13 @@ const F = ({
             p: r,
             px: m,
             py: a,
-            pt: p,
-            pl: n,
+            pt: n,
+            pl: p,
             pr: i,
             pb: l,
             "data-testid": o(t, "content"),
             children: [
-              P,
+              I,
               u
             ]
           }
@@ -70,8 +70,8 @@ const F = ({
             p: r,
             px: m,
             py: a,
-            pt: p,
-            pl: n,
+            pt: n,
+            pl: p,
             pr: i,
             pb: l,
             "data-testid": o(t, "footer"),
@@ -82,6 +82,7 @@ const F = ({
     }
   );
 };
+g.displayName = "SlideoutInner";
 export {
-  F as SlideoutInner
+  g as SlideoutInner
 };

package/dist/components/Slideout/hooks/usePushElement.js

@@ -1,6 +1,6 @@
 import { useRef as m, useEffect as y } from "react";
 import { GlobalCSSClass as e } from "../../../enums.js";
-import { t as p } from "../../../index-aTLA1VIV.js";
+import { t as p } from "../../../index-4vF4NlqC.js";
 import { useBreakpoint as S } from "../../../hooks/useBreakpoint.js";
 function h({
   element: r,

package/dist/components/Slider/Slider.js

@@ -8,8 +8,8 @@ import { useControlledState as A } from "../../hooks/useControlledState.js";
 import { useIdIfNeeded as D } from "../../hooks/useIdIfNeeded.js";
 import { IressReadonly as G } from "../Readonly/Readonly.js";
 import "../Readonly/Readonly.styles.js";
-import { s as W } from "../../factory-oPXoMw9H.js";
-import { s as q } from "../../is-valid-prop-Ce0wiweq.js";
+import { s as W } from "../../factory-CWvlR9Yh.js";
+import { s as q } from "../../is-valid-prop-DI4RCMon.js";
 import { GlobalCSSClass as z } from "../../enums.js";
 import { useNoDefaultValueInForms as B } from "../../patterns/Form/hooks/useNoDefaultValueInForms.js";
 const E = (r = 0, i = 10, n = 1) => {
@@ -24,10 +24,10 @@ const E = (r = 0, i = 10, n = 1) => {
   hiddenValueTooltip: l,
   max: a = 10,
   min: s = 0,
-  onChange: g,
+  onChange: y,
   readOnly: m,
   step: b = 1,
-  style: y,
+  style: g,
   tickLabels: S,
   value: h,
   ...u
@@ -63,7 +63,7 @@ const E = (r = 0, i = 10, n = 1) => {
       }
     );
   const p = R(), [L, M] = q(u), V = {
-    ...y,
+    ...g,
     "--iress-thumb-value-offset": $()
   };
   return /* @__PURE__ */ x(
@@ -86,7 +86,7 @@ const E = (r = 0, i = 10, n = 1) => {
             value: t,
             type: "range",
             onChange: (e) => {
-              g?.(e, Number(e.target.value)), I(Number(e.target.value));
+              y?.(e, Number(e.target.value)), I(Number(e.target.value));
             },
             ref: C,
             list: `${v}--markers`,
@@ -106,7 +106,8 @@ const E = (r = 0, i = 10, n = 1) => {
       ]
     }
   );
-}, le = T(H);
+}, J = T(H);
+J.displayName = "IressSlider";
 export {
-  le as IressSlider
+  J as IressSlider
 };

package/dist/components/Slider/Slider.styles.js

@@ -1,4 +1,4 @@
-import { s as e } from "../../sva-OmxClA9g.js";
+import { s as e } from "../../sva-wwkEhoyo.js";
 const i = e({
   slots: [
     "root",

package/dist/{src/components → components}/Slider/components/SliderTicks.d.ts

@@ -55,4 +55,7 @@ export interface SliderTickLabelValue extends Omit<IressStyledProps, 'children'>
  * It can either be a number or an object containing a value, optional label as well as optional styling.
  */
 export type SliderTickLabel = number | SliderTickLabelValue;
-export declare const SliderTicks: ({ max, min, tickLabels, ...restProps }: SliderTicksProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SliderTicks: {
+    ({ max, min, tickLabels, ...restProps }: SliderTicksProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Slider/components/SliderTicks.js

@@ -1,51 +1,53 @@
-import { jsx as o, jsxs as v } from "react/jsx-runtime";
-import { slider as n } from "../Slider.styles.js";
+import { jsx as o, jsxs as N } from "react/jsx-runtime";
+import { slider as m } from "../Slider.styles.js";
 import { c as d } from "../../../cx-DN21T1EH.js";
-import { propagateTestid as f } from "../../../helpers/utility/propagateTestid.js";
-import { s as u } from "../../../factory-oPXoMw9H.js";
-const N = (t, s, e, i, a) => {
-  const c = s === 0 ? t - a : t - (e[s - 1]?.value ?? 0);
-  return `${Number(c / (i - a) * 100)}%`;
-}, T = ({
+import { propagateTestid as T } from "../../../helpers/utility/propagateTestid.js";
+import { s as f } from "../../../factory-CWvlR9Yh.js";
+const u = (t, s, i, a, e) => {
+  const c = s === 0 ? t - e : t - (i[s - 1]?.value ?? 0);
+  return `${Number(c / (a - e) * 100)}%`;
+}, k = ({
   allTickLabels: t,
   "data-testid": s,
-  index: e,
-  max: i,
-  min: a,
+  index: i,
+  max: a,
+  min: e,
   tickLabel: c
 }) => {
-  const l = n(), { className: m, label: k, value: r, ...p } = c, h = {
-    "--iress-tick-label-width": N(
+  const l = m(), { className: n, label: p, value: r, ...h } = c, v = {
+    "--iress-tick-label-width": u(
       r,
-      e,
-      t,
       i,
-      a
+      t,
+      a,
+      e
     )
   };
-  return /* @__PURE__ */ v("div", { className: d(l.tickMark), style: h, children: [
+  return /* @__PURE__ */ N("div", { className: d(l.tickMark), style: v, children: [
     /* @__PURE__ */ o("option", { value: r, "data-testid": s }),
     /* @__PURE__ */ o(
-      u.div,
+      f.div,
       {
-        ...p,
-        className: d(l.tickMarkLabel, m),
-        children: k ?? `${r}`
+        ...h,
+        className: d(l.tickMarkLabel, n),
+        children: p ?? `${r}`
       }
     )
   ] }, r);
-}, g = ({
+};
+k.displayName = "TickMark";
+const y = ({
   max: t = 10,
   min: s = 0,
-  tickLabels: e = [],
-  ...i
+  tickLabels: i = [],
+  ...a
 }) => {
-  const a = n();
-  return /* @__PURE__ */ o("datalist", { className: a.tickMarkList, ...i, children: e.map((c, l) => /* @__PURE__ */ o(
-    T,
+  const e = m();
+  return /* @__PURE__ */ o("datalist", { className: e.tickMarkList, ...a, children: i.map((c, l) => /* @__PURE__ */ o(
+    k,
     {
-      allTickLabels: e,
-      "data-testid": f(i["data-testid"], "option"),
+      allTickLabels: i,
+      "data-testid": T(a["data-testid"], "option"),
       index: l,
       max: t,
       min: s,
@@ -54,6 +56,7 @@ const N = (t, s, e, i, a) => {
     c.value
   )) });
 };
+y.displayName = "SliderTicks";
 export {
-  g as SliderTicks
+  y as SliderTicks
 };

package/dist/{src/components → components}/Spinner/Spinner.d.ts

@@ -6,4 +6,7 @@ export interface IressSpinnerProps extends Omit<IressIconProps, 'name'> {
      **/
     spin?: IressIconProps['spin'];
 }
-export declare const IressSpinner: ({ className, spin, ...restProps }: IressSpinnerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const IressSpinner: {
+    ({ className, spin, ...restProps }: IressSpinnerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Spinner/Spinner.js

@@ -1,22 +1,23 @@
-import { jsx as s } from "react/jsx-runtime";
+import { jsx as m } from "react/jsx-runtime";
 import { GlobalCSSClass as n } from "../../enums.js";
-import { IressIcon as i } from "../Icon/Icon.js";
+import { IressIcon as e } from "../Icon/Icon.js";
 import "../Icon/Icon.styles.js";
-import { spinner as p } from "./Spinner.styles.js";
-import { c as e } from "../../cx-DN21T1EH.js";
-const x = ({
+import { spinner as i } from "./Spinner.styles.js";
+import { c as p } from "../../cx-DN21T1EH.js";
+const t = ({
   className: r,
-  spin: o = "half",
-  ...m
-}) => /* @__PURE__ */ s(
-  i,
+  spin: s = "half",
+  ...o
+}) => /* @__PURE__ */ m(
+  e,
   {
-    ...m,
-    className: e(r, p(), n.Spinner),
+    ...o,
+    className: p(r, i(), n.Spinner),
     name: "spinner-third",
-    spin: o
+    spin: s
   }
 );
+t.displayName = "IressSpinner";
 export {
-  x as IressSpinner
+  t as IressSpinner
 };

package/dist/components/Spinner/Spinner.styles.js

@@ -1,4 +1,4 @@
-import { c as a } from "../../cva-JiDXAa83.js";
+import { c as a } from "../../cva-kirNs9Ig.js";
 const o = a({
   base: {
     boxSizing: "border-box"

package/dist/{src/components → components}/Stack/Stack.d.ts

@@ -20,4 +20,7 @@ export type IressStackProps<E extends keyof React.JSX.IntrinsicElements = 'div'>
      */
     horizontalAlign?: HorizontalAligns;
 };
-export declare const IressStack: <E extends keyof React.JSX.IntrinsicElements = "div">({ className, element, ...restProps }: IressStackProps<E>) => import("react/jsx-runtime").JSX.Element;
+export declare const IressStack: {
+    <E extends keyof React.JSX.IntrinsicElements = "div">({ className, element, ...restProps }: IressStackProps<E>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Stack/Stack.js

@@ -1,26 +1,27 @@
 import { jsx as t } from "react/jsx-runtime";
 import { useMemo as a } from "react";
 import { stack as c } from "./Stack.styles.js";
-import { s as i } from "../../factory-oPXoMw9H.js";
+import { s as i } from "../../factory-CWvlR9Yh.js";
 import { GlobalCSSClass as p } from "../../enums.js";
-import { c as f } from "../../cx-DN21T1EH.js";
-const n = ({
-  className: r,
-  element: o,
-  ...s
+import { c as e } from "../../cx-DN21T1EH.js";
+const f = ({
+  className: o,
+  element: s,
+  ...r
 }) => {
   const m = a(
-    () => i(o ?? "div", c),
-    [o]
+    () => i(s ?? "div", c),
+    [s]
   );
   return /* @__PURE__ */ t(
     m,
     {
-      ...s,
-      className: f(r, p.Stack)
+      ...r,
+      className: e(o, p.Stack)
     }
   );
 };
+f.displayName = "IressStack";
 export {
-  n as IressStack
+  f as IressStack
 };

package/dist/components/Stack/Stack.styles.js

@@ -1,4 +1,4 @@
-import { c as e } from "../../cva-JiDXAa83.js";
+import { c as e } from "../../cva-kirNs9Ig.js";
 const i = e({
   base: {
     display: "flex",

package/dist/components/Styled/Styled.d.ts

@@ -0,0 +1,19 @@
+import { IressStyledProps as StyledProps } from '../../types';
+import { ReactNode, ElementType, ComponentPropsWithRef } from 'react';
+interface IressStyledProps<T extends ElementType = 'div'> extends StyledProps {
+    /**
+     * Content to be styled.
+     */
+    children?: ReactNode;
+    /**
+     * The HTML element or custom component to render.
+     */
+    element?: T;
+}
+type IressStyledComponent = (<E extends ElementType = 'div'>(props: IressStyledProps<E> & {
+    ref?: ComponentPropsWithRef<E>['ref'];
+}) => ReactNode) & {
+    displayName?: 'IressStyled';
+};
+export declare const IressStyled: IressStyledComponent;
+export {};

package/dist/components/Styled/Styled.js

@@ -0,0 +1,16 @@
+import { jsx as o } from "react/jsx-runtime";
+import { forwardRef as r, useMemo as s } from "react";
+import { s as n } from "../../factory-CWvlR9Yh.js";
+const d = r(
+  (e, t) => {
+    const m = s(
+      () => n(e.element ?? "div"),
+      [e.element]
+    );
+    return /* @__PURE__ */ o(m, { ...e, ref: t });
+  }
+);
+d.displayName = "IressStyled";
+export {
+  d as IressStyled
+};

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

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

package/dist/components/Styled/index.js

@@ -0,0 +1,4 @@
+import { IressStyled as o } from "./Styled.js";
+export {
+  o as IressStyled
+};

package/dist/{src/components → components}/TabSet/Tab/Tab.d.ts

@@ -26,6 +26,8 @@ export type IressTabProps<THref extends string | undefined = undefined> = Omit<I
      */
     value?: FormControlValue;
 };
-export declare const IressTab: <THref extends string | undefined = undefined>(props: IressTabProps<THref> & {
+export declare const IressTab: (<THref extends string | undefined = undefined>(props: IressTabProps<THref> & {
     ref?: Ref<HTMLElementTagNameMap[ButtonElement<undefined, THref>]>;
-}) => ReactElement;
+}) => ReactElement) & {
+    displayName: "IressTab";
+};

package/dist/components/TabSet/Tab/Tab.js

@@ -1,38 +1,38 @@
-import { jsxs as k, Fragment as E, jsx as u } from "react/jsx-runtime";
-import { forwardRef as M, useRef as L, useContext as D, useImperativeHandle as N, useLayoutEffect as R, useCallback as S, useMemo as $ } from "react";
-import { idsLogger as j } from "../../../helpers/utility/idsLogger.js";
-import { useIdIfNeeded as F } from "../../../hooks/useIdIfNeeded.js";
-import { createPortal as H } from "react-dom";
-import { s as K } from "../../../factory-oPXoMw9H.js";
-import { tab as q } from "./Tab.styles.js";
-import { c as G } from "../../../cx-DN21T1EH.js";
-import { a as U } from "../../../floating-ui.react-BetVZ099.js";
-import { focusableElements as W } from "../../../helpers/dom/focusableElements.js";
-import { GlobalCSSClass as Y } from "../../../enums.js";
-import { TabSetContext as z } from "../TabSetProvider.js";
-const B = (i, e, s, n) => {
-  const t = i.querySelector("[id]"), r = t?.getAttribute("id");
-  t?.removeAttribute("id"), i.removeAttribute("tabindex"), i.removeAttribute("data-active"), i.removeAttribute("aria-selected"), s.ref?.(e), e.tabIndex = n ? 0 : -1, n ? e.setAttribute("data-active", "") : e.removeAttribute("data-active"), r && e.setAttribute("id", r), e.setAttribute("aria-selected", String(n));
-}, J = ({
-  activate: i,
+import { jsxs as E, Fragment as M, jsx as u } from "react/jsx-runtime";
+import { forwardRef as L, useRef as N, useContext as D, useImperativeHandle as R, useLayoutEffect as $, useCallback as S, useMemo as j } from "react";
+import { idsLogger as F } from "../../../helpers/utility/idsLogger.js";
+import { useIdIfNeeded as H } from "../../../hooks/useIdIfNeeded.js";
+import { createPortal as K } from "react-dom";
+import { s as q } from "../../../factory-CWvlR9Yh.js";
+import { tab as G } from "./Tab.styles.js";
+import { c as U } from "../../../cx-DN21T1EH.js";
+import { a as W } from "../../../floating-ui.react-BetVZ099.js";
+import { focusableElements as Y } from "../../../helpers/dom/focusableElements.js";
+import { GlobalCSSClass as z } from "../../../enums.js";
+import { TabSetContext as B } from "../TabSetProvider.js";
+const J = (a, e, s, i) => {
+  const t = a.querySelector("[id]"), r = t?.getAttribute("id");
+  t?.removeAttribute("id"), a.removeAttribute("tabindex"), a.removeAttribute("data-active"), a.removeAttribute("aria-selected"), s.ref?.(e), e.tabIndex = i ? 0 : -1, i ? e.setAttribute("data-active", "") : e.removeAttribute("data-active"), r && e.setAttribute("id", r), e.setAttribute("aria-selected", String(i));
+}, h = ({
+  activate: a,
   children: e,
   selected: s,
-  ...n
+  ...i
 }) => /* @__PURE__ */ u(
-  U,
+  W,
   {
     render: (t) => /* @__PURE__ */ u(
       "div",
       {
-        ...n,
+        ...i,
         ...t,
         "aria-selected": s,
-        onClick: () => i(),
-        onKeyDown: (r) => ["Space", "Enter"].includes(r.key) && i(),
+        onClick: () => a(),
+        onKeyDown: (r) => ["Space", "Enter"].includes(r.key) && a(),
         ref: (r) => {
           if (!r) return;
-          const m = W(r)[0];
-          m && B(
+          const m = Y(r)[0];
+          m && J(
             r,
             m,
             t,
@@ -43,76 +43,78 @@ const B = (i, e, s, n) => {
       }
     )
   }
-), O = ({
-  active: i,
+);
+h.displayName = "TabInsideTabSet";
+const O = ({
+  active: a,
   children: e,
   className: s,
-  "data-testid": n,
+  "data-testid": i,
   href: t,
   label: r,
   type: m = "button",
   value: v,
   ...b
-}, T) => {
-  const c = F({ id: b.id }), d = L(null), a = D(z), { register: A, unregister: g, setHover: f } = a ?? {}, { onMouseEnter: w, onMouseLeave: y } = b;
-  N(T, () => d.current), R(() => {
-    const o = d.current;
+}, C) => {
+  const d = H({ id: b.id }), c = N(null), n = D(B), { register: A, unregister: g, setHover: p } = n ?? {}, { onMouseEnter: y, onMouseLeave: T } = b;
+  R(C, () => c.current), $(() => {
+    const o = c.current;
     if (o)
       return A?.(o, v), () => g?.(o);
   }, [A, g, v]);
-  const p = a ? a.isActive(d.current) : i, h = G(
+  const f = n ? n.isActive(c.current) : a, w = U(
     s,
-    q({ active: p, insideTabSet: !!a }),
-    Y.Tab
+    G({ active: f, insideTabSet: !!n }),
+    z.Tab
   ), x = S(
     (o) => {
-      w?.(o), f?.(o.currentTarget);
+      y?.(o), p?.(o.currentTarget);
     },
-    [w, f]
-  ), I = S(
+    [y, p]
+  ), k = S(
     (o) => {
-      y?.(o), f?.();
+      T?.(o), p?.();
     },
-    [y, f]
-  ), C = $(
-    () => K(t ? "a" : "button"),
+    [T, p]
+  ), I = j(
+    () => q(t ? "a" : "button"),
     [t]
   );
-  if (e && t && j(
+  if (e && t && F(
     "IressTab: You should not use `children` with `href` prop, as the `children` will be seen before the page navigates."
-  ), a) {
-    const o = e && p;
-    return /* @__PURE__ */ k(E, { children: [
+  ), n) {
+    const o = e && f;
+    return /* @__PURE__ */ E(M, { children: [
       /* @__PURE__ */ u(
-        J,
+        h,
         {
-          activate: () => a.activate(d.current),
-          selected: p,
+          activate: () => n.activate(c.current),
+          selected: f,
           children: /* @__PURE__ */ u(
-            C,
+            I,
             {
-              className: h,
-              "aria-controls": e ? `${c}--panel` : void 0,
+              className: w,
+              "aria-controls": e ? `${d}--panel` : void 0,
               role: "tab",
-              "data-testid": n,
+              "data-testid": i,
               ...b,
               href: t,
-              id: c,
+              id: d,
               onMouseEnter: x,
-              onMouseLeave: I,
-              ref: d,
+              onMouseLeave: k,
+              ref: c,
               type: m,
               children: r
             }
           )
         }
       ),
-      a.panel && H(
+      n.panel && K(
         /* @__PURE__ */ u(
           "div",
           {
-            "aria-labelledby": c,
-            id: `${c}--panel`,
+            "aria-labelledby": d,
+            id: `${d}--panel`,
             role: "tabpanel",
             onKeyDown: (l) => {
               (l.key === "ArrowLeft" || l.key === "ArrowRight" || l.key === "ArrowUp" || l.key === "ArrowDown") && l.stopPropagation();
@@ -121,25 +123,26 @@ const B = (i, e, s, n) => {
             children: e
           }
         ),
-        a.panel,
-        `${c}--panel`
+        n.panel,
+        `${d}--panel`
       )
     ] });
   }
   return /* @__PURE__ */ u(
-    C,
+    I,
     {
-      className: h,
-      "data-testid": n,
+      className: w,
+      "data-testid": i,
       ...b,
       href: t,
-      id: c,
-      ref: d,
+      id: d,
+      ref: c,
       type: m,
       children: r
     }
   );
-}, ae = M(O);
+}, P = L(O);
+P.displayName = "IressTab";
 export {
-  ae as IressTab
+  P as IressTab
 };

package/dist/components/TabSet/Tab/Tab.styles.js

@@ -1,4 +1,4 @@
-import { c as t } from "../../../cva-JiDXAa83.js";
+import { c as t } from "../../../cva-kirNs9Ig.js";
 const e = t({
   base: {
     alignItems: "center",