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

package/dist/components/Slider/components/SliderTicks.d.ts

@@ -0,0 +1,61 @@
+import { ReactNode } from 'react';
+import { IressStyledProps, IressUnstyledProps } from '../../../types';
+import { IressTestProps } from '../../../interfaces';
+export interface SliderTicksProps extends IressUnstyledProps<'datalist'> {
+    /**
+     * Set the maximum value for the slider.
+     * @default 10
+     */
+    max?: number;
+    /**
+     * Sets minimum value for the slider.
+     * @default 0
+     */
+    min?: number;
+    /**
+     * List of labels to be displayed.
+     */
+    tickLabels?: SliderTickLabelValue[];
+}
+export interface SliderTickMarkProps extends IressTestProps {
+    /**
+     * List of all tick labels for the slider.
+     * Used to calculate the relative width of each tick mark.
+     */
+    allTickLabels: SliderTickLabelValue[];
+    /**
+     * The index of the tick label in the list.
+     */
+    index: number;
+    /**
+     * The maximum value of the slider.
+     */
+    max: number;
+    /**
+     * The minimum value of the slider.
+     */
+    min: number;
+    /**
+     * The tick label to be displayed.
+     */
+    tickLabel: SliderTickLabelValue;
+}
+export interface SliderTickLabelValue extends Omit<IressStyledProps, 'children'> {
+    /**
+     * The label of the tick mark. If not provided, the value will be displayed.
+     */
+    label?: ReactNode;
+    /**
+     * The value of the tick mark. Will be used as the value of the form control.
+     */
+    value: number;
+}
+/**
+ * Represents a tick label for the slider.
+ * 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;
+    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-CcYfm2kB.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/components/Spinner/Spinner.d.ts

@@ -0,0 +1,31 @@
+import { IressIconProps } from '../Icon';
+import { IressStyledProps } from '../../types';
+type IressSpinnerDefaultProps = Omit<IressIconProps, 'name'> & {
+    /**
+     * Spin speed of spinner.
+     * @default half
+     **/
+    spin?: IressIconProps['spin'];
+    /**
+     * Variant of spinner.
+     * - 'default': Standard rotating spinner
+     **/
+    variant?: 'default';
+};
+type IressSpinnerChattyProps = IressStyledProps<'span'> & {
+    /**
+     * Variant of spinner.
+     * - 'chatty': Animated dots for chatting/typing indicator
+     **/
+    variant: 'chatty';
+    /**
+     * Screen reader text for the chatty spinner.
+     */
+    screenreaderText: string;
+};
+export type IressSpinnerProps = IressSpinnerDefaultProps | IressSpinnerChattyProps;
+export declare const IressSpinner: {
+    (props: IressSpinnerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/components/Spinner/Spinner.js

@@ -1,22 +1,40 @@
-import { jsx as s } from "react/jsx-runtime";
-import { GlobalCSSClass as n } from "../../enums.js";
-import { IressIcon as i } from "../Icon/Icon.js";
+import { jsxs as p, jsx as a } from "react/jsx-runtime";
+import { GlobalCSSClass as e } from "../../enums.js";
+import { IressIcon as N } 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 = ({
-  className: r,
-  spin: o = "half",
-  ...m
-}) => /* @__PURE__ */ s(
-  i,
-  {
-    ...m,
-    className: e(r, p(), n.Spinner),
-    name: "spinner-third",
-    spin: o
+import "../Icon/IconProvider.js";
+import { chatty as d, spinner as f } from "./Spinner.styles.js";
+import { c as t } from "../../cx-DN21T1EH.js";
+const S = (r) => {
+  if (r.variant === "chatty") {
+    const { className: c, screenreaderText: i, ...l } = r, s = d();
+    return /* @__PURE__ */ p(
+      "span",
+      {
+        className: t(c, s.root, e.Spinner),
+        "aria-label": i,
+        role: "status",
+        ...l,
+        children: [
+          /* @__PURE__ */ a("span", { className: s.dot }),
+          /* @__PURE__ */ a("span", { className: s.dot }),
+          /* @__PURE__ */ a("span", { className: s.dot })
+        ]
+      }
+    );
   }
-);
+  const { className: n, spin: o = "half", ...m } = r;
+  return /* @__PURE__ */ a(
+    N,
+    {
+      ...m,
+      className: t(n, f(), e.Spinner),
+      name: "spinner-third",
+      spin: o
+    }
+  );
+};
+S.displayName = "IressSpinner";
 export {
-  x as IressSpinner
+  S as IressSpinner
 };

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

@@ -0,0 +1,2 @@
+export declare const spinner: import('../../styled-system/types').RecipeRuntimeFn<{}>;
+export declare const chatty: import('../../styled-system/types').SlotRecipeRuntimeFn<"root" | "dot", import('../../styled-system/types').SlotRecipeVariantRecord<"root" | "dot">>;

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

@@ -1,11 +1,39 @@
-import { c as a } from "../../cva-JiDXAa83.js";
-const o = a({
+import { c as t } from "../../cva-3iuaj0TL.js";
+import { s as a } from "../../sva-CsHRIRDW.js";
+const o = t({
   base: {
     boxSizing: "border-box"
   },
-  variants: {},
-  defaultVariants: {}
+  variants: {}
+}), e = a({
+  slots: ["root", "dot"],
+  base: {
+    root: {
+      // Performance: CSS containment (no paint to allow animation effects)
+      contain: "layout style",
+      display: "inline-flex",
+      alignItems: "center",
+      gap: "spacing.1"
+    },
+    dot: {
+      width: "[0.5em]",
+      height: "[0.5em]",
+      borderRadius: "50%",
+      bg: "colour.neutral.50",
+      animation: "chatty 1.4s infinite ease-in-out",
+      "&:nth-child(1)": {
+        animationDelay: "0s"
+      },
+      "&:nth-child(2)": {
+        animationDelay: "0.2s"
+      },
+      "&:nth-child(3)": {
+        animationDelay: "0.4s"
+      }
+    }
+  }
 });
 export {
+  e as chatty,
   o as spinner
 };

package/dist/components/Spinner/index.js

@@ -1,6 +1,7 @@
 import { IressSpinner as n } from "./Spinner.js";
-import { spinner as p } from "./Spinner.styles.js";
+import { chatty as p, spinner as t } from "./Spinner.styles.js";
 export {
   n as IressSpinner,
-  p as spinner
+  p as chatty,
+  t as spinner
 };

package/dist/components/Stack/Stack.d.ts

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+import { PositiveSpacingToken, HorizontalAligns, VerticalAligns, IressStyledProps, ResponsiveProp } from '../../types';
+export type IressStackProps<E extends keyof React.JSX.IntrinsicElements = 'div'> = IressStyledProps<E> & {
+    /**
+     * Content to be separated by a gutter.
+     */
+    children?: ReactNode;
+    /**
+     * The HTML element that should be rendered.
+     * @default 'div'
+     */
+    element?: E;
+    /**
+     * Sets the gap between direct children.
+     * @see https://developer.mozilla.org/docs/Web/CSS/gap
+     */
+    gap?: ResponsiveProp<PositiveSpacingToken>;
+    /**
+     * Sets the horizontal alignment of the stack content.
+     */
+    horizontalAlign?: HorizontalAligns;
+    /**
+     * Sets the vertical alignment of the stack content.
+     */
+    verticalAlign?: Omit<VerticalAligns, 'stretch'> | 'between' | 'around' | 'evenly';
+};
+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-CcYfm2kB.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.d.ts

@@ -0,0 +1,33 @@
+export declare const stack: import('../../styled-system/types').RecipeRuntimeFn<{
+    horizontalAlign: {
+        center: {
+            alignItems: "center";
+        };
+        left: {
+            alignItems: "flex-start";
+        };
+        right: {
+            alignItems: "flex-end";
+        };
+    };
+    verticalAlign: {
+        top: {
+            justifyContent: "flex-start";
+        };
+        middle: {
+            justifyContent: "center";
+        };
+        bottom: {
+            justifyContent: "flex-end";
+        };
+        between: {
+            justifyContent: "space-between";
+        };
+        around: {
+            justifyContent: "space-around";
+        };
+        evenly: {
+            justifyContent: "space-evenly";
+        };
+    };
+}>;

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

@@ -1,5 +1,5 @@
-import { c as e } from "../../cva-JiDXAa83.js";
-const i = e({
+import { c as t } from "../../cva-3iuaj0TL.js";
+const n = t({
   base: {
     display: "flex",
     flexDirection: "column",
@@ -19,9 +19,29 @@ const i = e({
       right: {
         alignItems: "flex-end"
       }
+    },
+    verticalAlign: {
+      top: {
+        justifyContent: "flex-start"
+      },
+      middle: {
+        justifyContent: "center"
+      },
+      bottom: {
+        justifyContent: "flex-end"
+      },
+      between: {
+        justifyContent: "space-between"
+      },
+      around: {
+        justifyContent: "space-around"
+      },
+      evenly: {
+        justifyContent: "space-evenly"
+      }
     }
   }
 });
 export {
-  i as stack
+  n as stack
 };

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-CcYfm2kB.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/components/TabSet/Tab/Tab.d.ts

@@ -0,0 +1,33 @@
+import { ReactNode, Ref, ReactElement } from 'react';
+import { FormControlValue, IressStyledProps } from '../../../types';
+import { ButtonElement } from '../../Button';
+export type IressTabProps<THref extends string | undefined = undefined> = Omit<IressStyledProps<ButtonElement<undefined, THref>>, 'value'> & {
+    /**
+     * Sets the active styling of the tab.
+     */
+    active?: boolean;
+    /**
+     * Text to be displayed inside the tab panel.
+     */
+    children?: ReactNode;
+    /**
+     * Contains a URL or a URL fragment that the hyperlink points to.
+     * If this property is set, an anchor tag will be rendered.
+     *
+     * **Note:** This prop should be avoided when using `children`.
+     */
+    href?: THref;
+    /**
+     * The label of this tab.
+     */
+    label: ReactNode;
+    /**
+     * You can provide your own value to allow you to control its active state when used in `IressTabSet`.
+     */
+    value?: FormControlValue;
+};
+export declare const IressTab: (<THref extends string | undefined = undefined>(props: IressTabProps<THref> & {
+    ref?: Ref<HTMLElementTagNameMap[ButtonElement<undefined, THref>]>;
+}) => ReactElement) & {
+    displayName: "IressTab";
+};