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

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

@@ -0,0 +1,151 @@
+export declare const input: import('../../styled-system/types').SlotRecipeRuntimeFn<"inline" | "wrapper" | "action" | "root" | "addon" | "internal" | "formControl", {
+    alignRight: {
+        true: {
+            formControl: {
+                textAlign: "right";
+            };
+        };
+    };
+    autoGrow: {
+        true: {
+            formControl: {
+                resize: "none";
+            };
+        };
+    };
+    inline: {
+        true: {
+            wrapper: {
+                display: "inline-flex";
+            };
+        };
+    };
+    isTextarea: {
+        true: {
+            wrapper: {
+                alignItems: "end";
+            };
+            formControl: {
+                lineHeight: number;
+                height: "auto";
+                scrollable: "y";
+            };
+        };
+    };
+    readOnly: {
+        true: {
+            wrapper: {
+                border: "[none]";
+                _hover: {
+                    boxShadow: "none";
+                };
+            };
+        };
+    };
+    width: {
+        '2': {
+            wrapper: {
+                maxWidth: "[fit-content]";
+            };
+            formControl: {
+                width: "input.2";
+            };
+        };
+        '4': {
+            wrapper: {
+                maxWidth: "[fit-content]";
+            };
+            formControl: {
+                width: "input.4";
+            };
+        };
+        '6': {
+            wrapper: {
+                maxWidth: "[fit-content]";
+            };
+            formControl: {
+                width: "input.6";
+            };
+        };
+        '8': {
+            wrapper: {
+                maxWidth: "[fit-content]";
+            };
+            formControl: {
+                width: "input.8";
+            };
+        };
+        '10': {
+            wrapper: {
+                maxWidth: "[fit-content]";
+            };
+            formControl: {
+                width: "input.10";
+            };
+        };
+        '12': {
+            wrapper: {
+                maxWidth: "[fit-content]";
+            };
+            formControl: {
+                width: "input.12";
+            };
+        };
+        '16': {
+            wrapper: {
+                maxWidth: "[fit-content]";
+            };
+            formControl: {
+                width: "input.16";
+            };
+        };
+        '25%': {
+            wrapper: {
+                width: "input.25%";
+            };
+            formControl: {
+                width: "[100%]";
+            };
+        };
+        '50%': {
+            wrapper: {
+                width: "input.50%";
+            };
+            formControl: {
+                width: "[100%]";
+            };
+        };
+        '75%': {
+            wrapper: {
+                width: "input.75%";
+            };
+            formControl: {
+                width: "[100%]";
+            };
+        };
+        '100%': {
+            wrapper: {
+                width: "input.100%";
+            };
+            formControl: {
+                width: "[100%]";
+            };
+        };
+    };
+    variant: {
+        search: {
+            wrapper: {
+                '--iress-border-color--default': "{colors.colour.neutral.40}";
+                '--iress-border-color--hover': "{colors.colour.neutral.40}";
+                borderRadius: "radius.4";
+            };
+        };
+    };
+    stretched: {
+        true: {
+            formControl: {
+                height: "[100%]";
+            };
+        };
+    };
+}>;

package/dist/components/Input/Input.styles.js

@@ -1,37 +1,53 @@
-import { s as r } from "../../sva-OmxClA9g.js";
-const o = r({
-  slots: ["root", "wrapper", "inline", "addon", "internal", "formControl"],
+import { s as r } from "../../sva-CsHRIRDW.js";
+const t = r({
+  slots: [
+    "root",
+    "wrapper",
+    "inline",
+    "addon",
+    "internal",
+    "formControl",
+    "action"
+  ],
   base: {
+    root: {
+      contain: "style",
+      display: "flex",
+      alignItems: "stretch",
+      flexGrow: "1",
+      margin: "spacing.0",
+      gap: "spacing.2"
+    },
     wrapper: {
+      // Performance: CSS containment limits style recalculation scope
+      contain: "style",
       display: "flex",
       alignItems: "stretch",
+      flexGrow: "1",
       borderRadius: "radius.system.form",
       backgroundColor: "colour.neutral.10",
       minHeight: "[calc({sizes.input.height} - 2px)]",
-      margin: "[0]",
-      flexGrow: "1",
       border: "input",
-      "&:has(input:focus, textarea:focus)": {
-        borderColor: "colour.primary.fill",
-        layerStyle: "elevation.focus"
-      }
+      focusable: "has-input"
     },
     addon: {
-      borderRadius: "radius.100",
-      backgroundColor: "colour.neutral.10",
+      borderRadius: "radius.system.form",
       minHeight: "[calc({sizes.input.height} - 2px)]",
-      color: "colour.neutral.80",
+      color: "colour.neutral.60",
       lineHeight: "1",
       fontWeight: "300",
       display: "inline-flex",
       alignItems: "center",
       py: "none",
-      "&:not(:empty)": {
-        px: "spacing.3"
-      },
       _empty: {
         display: "none"
       },
+      _first: {
+        pl: "spacing.3"
+      },
+      _last: {
+        px: "spacing.3"
+      },
       "&:not(:empty):has(button)": {
         px: "none"
       }
@@ -39,7 +55,7 @@ const o = r({
     internal: {
       display: "flex",
       alignItems: "center",
-      "& > *": {
+      "& > :not(.ids-button)": {
         padding: "[0 {spacing.spacing.3}]"
       },
       _empty: {
@@ -49,35 +65,51 @@ const o = r({
     formControl: {
       borderWidth: 0,
       borderRadius: "radius.system.form",
-      padding: "spacing.2",
-      backgroundColor: "colour.neutral.10",
+      paddingInline: "spacing.3",
+      paddingBlock: "spacing.1",
       textStyle: "typography.body.md",
-      color: "colour.neutral.80",
+      color: "colour.neutral.90",
       display: "block",
       boxSizing: "border-box",
       flex: "auto",
       maxWidth: "[100%]",
       minHeight: "[calc({sizes.input.height} - 2px)]",
       lineHeight: 1,
-      _focus: {
-        outline: "[none]"
-      },
+      bg: "transparent",
       _placeholder: {
         color: "colour.neutral.60"
       },
+      _disabled: {
+        color: "colour.neutral.70",
+        cursor: "not-allowed"
+      },
       "&::file-selector-button": {
         backgroundColor: "colour.primary.surface",
         color: "colour.primary.text",
         borderRadius: "radius.system.form",
         py: "spacing.2",
         px: "spacing.2",
-        m: "-spacing.1",
+        ml: "-spacing.1",
         mr: "spacing.2",
         cursor: "pointer",
         _hover: {
           backgroundColor: "colour.primary.surfaceHover"
         }
       }
+    },
+    action: {
+      border: "input",
+      color: "colour.neutral.70",
+      bg: "colour.neutral.10",
+      _hover: {
+        bg: "colour.neutral.20",
+        boxShadow: "{colors.colour.neutral.70} 0px 0px 0px 1px"
+      },
+      _active: {
+        bg: "colour.neutral.10",
+        borderColor: "colour.neutral.90",
+        boxShadow: "{colors.colour.neutral.90} 0px 0px 0px 1px"
+      }
     }
   },
   variants: {
@@ -88,6 +120,13 @@ const o = r({
         }
       }
     },
+    autoGrow: {
+      true: {
+        formControl: {
+          resize: "none"
+        }
+      }
+    },
     inline: {
       true: {
         wrapper: {
@@ -97,16 +136,23 @@ const o = r({
     },
     isTextarea: {
       true: {
+        wrapper: {
+          alignItems: "end"
+        },
         formControl: {
           lineHeight: 1.5,
-          height: "auto"
+          height: "auto",
+          scrollable: "y"
         }
       }
     },
     readOnly: {
       true: {
         wrapper: {
-          border: "[none]"
+          border: "[none]",
+          _hover: {
+            boxShadow: "none"
+          }
         }
       }
     },
@@ -167,42 +213,69 @@ const o = r({
           width: "input.16"
         }
       },
-      "25perc": {
+      "25%": {
         wrapper: {
-          width: "input.25perc"
+          width: "input.25%"
         },
         formControl: {
           width: "[100%]"
         }
       },
-      "50perc": {
+      "50%": {
         wrapper: {
-          width: "input.50perc"
+          width: "input.50%"
         },
         formControl: {
           width: "[100%]"
         }
       },
-      "75perc": {
+      "75%": {
         wrapper: {
-          width: "input.75perc"
+          width: "input.75%"
         },
         formControl: {
           width: "[100%]"
         }
       },
-      "100perc": {
+      "100%": {
         wrapper: {
-          width: "input.100perc"
+          width: "input.100%"
         },
         formControl: {
           width: "[100%]"
         }
       }
+    },
+    variant: {
+      search: {
+        wrapper: {
+          "--iress-border-color--default": "{colors.colour.neutral.40}",
+          "--iress-border-color--hover": "{colors.colour.neutral.40}",
+          borderRadius: "radius.4"
+        }
+      }
+    },
+    stretched: {
+      true: {
+        formControl: {
+          height: "[100%]"
+        }
+      }
     }
   },
+  compoundVariants: [
+    {
+      isTextarea: !0,
+      stretched: !0,
+      css: {
+        formControl: {
+          height: "[100%]"
+        }
+      }
+    }
+  ],
   defaultVariants: {}
 });
 export {
-  o as input
+  t as input
 };

package/dist/components/Input/InputBase/InputBase.d.ts

@@ -0,0 +1,41 @@
+import { ReactElement, Ref } from 'react';
+import { IressStyledProps } from '../../../types';
+import { ReactHookFormCompatibleRef } from '../../../interfaces';
+type InputElement<TRows extends number | undefined = undefined> = TRows extends number ? 'textarea' : 'input';
+/**
+ * InputBaseElement is a type that maps to either an HTMLInputElement or HTMLTextAreaElement
+ * based on the `TRows` type parameter.
+ * If `TRows` is a number, it maps to HTMLTextAreaElement; otherwise, it maps to HTMLInputElement.
+ */
+export type InputBaseElement<TRows extends number | undefined = undefined> = HTMLElementTagNameMap[InputElement<TRows>];
+/**
+ * InputRef is a type that represents a ref to the InputBaseElement.
+ * It is compatible with React Hook Form and can be used to access the input or textarea element.
+ */
+export type InputRef<TRows extends number | undefined = undefined> = ReactHookFormCompatibleRef<InputBaseElement<TRows>>;
+/**
+ * `InputBase` is a versatile input field component that can be used as either a text input or a textarea.
+ *
+ * If the `rows` prop is greater than 0, it will render a textarea; otherwise, it will render a regular text input.
+ *
+ * - **Ref Forwarding and Imperative Handle**: This component forwards a ref to the input or textarea element and provides a `focus` method via `useImperativeHandle`. This allows parent components to programmatically focus the input.
+ */
+export type InputBaseProps<TRows extends number | undefined = undefined> = Omit<IressStyledProps<InputElement<TRows>>, 'width'> & {
+    /**
+     * Number of rows in the `textarea` (when set the component renders a textarea element)
+     */
+    rows?: TRows;
+};
+/**
+ * `InputBase` is a versatile input field component that can be used as either a text input or a textarea.
+ *
+ * If the `rows` prop is greater than 0, it will render a textarea; otherwise, it will render a regular text input.
+ *
+ * - **Ref Forwarding and Imperative Handle**: This component forwards a ref to the input or textarea element and provides a `focus` method via `useImperativeHandle`. This allows parent components to programmatically focus the input.
+ */
+export declare const InputBase: (<TRows extends number | undefined = undefined>(props: InputBaseProps<TRows> & {
+    ref?: Ref<InputRef<TRows>>;
+}) => ReactElement) & {
+    displayName: "InputBase";
+};
+export {};

package/dist/components/Input/InputBase/InputBase.js

@@ -1,18 +1,18 @@
-import { jsx as p } from "react/jsx-runtime";
-import { forwardRef as l, useRef as s, useImperativeHandle as d } from "react";
-import { s as f } from "../../../factory-oPXoMw9H.js";
-const m = ({ "data-testid": t, rows: e, ...u }, i) => {
-  const a = e !== void 0, r = s(null), n = s(null);
-  if (d(i, () => {
-    const c = a ? n.current : r.current;
+import { jsx as s } from "react/jsx-runtime";
+import { forwardRef as l, useRef as c, useImperativeHandle as d } from "react";
+import { s as i } from "../../../factory-CcYfm2kB.js";
+const m = ({ "data-testid": t, rows: e, ...u }, f) => {
+  const a = e !== void 0, r = c(null), n = c(null);
+  if (d(f, () => {
+    const p = a ? n.current : r.current;
     return {
-      focus: () => c?.focus(),
-      blur: () => c?.blur(),
+      focus: () => p?.focus(),
+      blur: () => p?.blur(),
       input: a ? n.current : r.current
     };
   }), e !== void 0)
-    return /* @__PURE__ */ p(
-      f.textarea,
+    return /* @__PURE__ */ s(
+      i.textarea,
       {
         rows: e,
         ...t && { "data-testid": `${t}__textarea` },
@@ -21,8 +21,8 @@ const m = ({ "data-testid": t, rows: e, ...u }, i) => {
       }
     );
   const o = u;
-  return /* @__PURE__ */ p(
-    f.input,
+  return /* @__PURE__ */ s(
+    i.input,
     {
       ...t && { "data-testid": `${t}__input` },
       ...o,
@@ -30,7 +30,8 @@ const m = ({ "data-testid": t, rows: e, ...u }, i) => {
       ref: r
     }
   );
-}, v = l(m);
+}, x = l(m);
+x.displayName = "InputBase";
 export {
-  v as InputBase
+  x as InputBase
 };

package/dist/components/InputCurrency/InputCurrency.d.ts

@@ -0,0 +1,30 @@
+import { InputRef } from '../Input/InputBase/InputBase';
+import { ReactElement, RefAttributes } from 'react';
+import { IressInputProps } from '../Input/Input';
+import { FormControlValue } from '../../types';
+export interface IressInputCurrencyProps<T extends FormControlValue = string | number> extends Omit<IressInputProps<T, undefined>, 'rows'> {
+    /**
+     * Set input content align to right.
+     */
+    alignRight?: boolean;
+    /**
+     * Set the currency symbol and appended currency code, default is `AUD`.
+     */
+    currencyCode?: string;
+    /**
+     * Pass additional number format options.
+     * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat
+     */
+    formatOptions?: Omit<Intl.NumberFormatOptions, 'currency'>;
+    /**
+     * Set the region of the currency, default is `en-AU`.
+     */
+    locale?: Intl.LocalesArgument;
+    /**
+     * Set the currency symbol.
+     */
+    withSymbol?: boolean;
+}
+export declare const IressInputCurrency: (<T extends Exclude<FormControlValue, boolean> = string | number>(props: IressInputCurrencyProps<T> & RefAttributes<InputRef | null>) => ReactElement) & {
+    displayName: "IressInputCurrency";
+};

package/dist/components/InputCurrency/InputCurrency.js

@@ -1,42 +1,43 @@
 import { jsx as e } from "react/jsx-runtime";
-import { IressInput as f } from "../Input/Input.js";
+import { IressInput as u } from "../Input/Input.js";
 import "../Input/Input.styles.js";
-import { IressText as u } from "../Text/Text.js";
+import { IressText as f } from "../Text/Text.js";
 import { forwardRef as y } from "react";
-import { formatCurrency as C } from "../../helpers/formatting/formatCurrency.js";
-import { c as I } from "../../cx-DN21T1EH.js";
+import { formatCurrency as I } from "../../helpers/formatting/formatCurrency.js";
+import { c as C } from "../../cx-DN21T1EH.js";
 import { GlobalCSSClass as d } from "../../enums.js";
-const O = y((t, m) => {
+const x = (t, n) => {
   const {
-    locale: n = "en-AU",
+    locale: s = "en-AU",
     currencyCode: r = "AUD",
-    withSymbol: s,
-    formatOptions: a,
-    alignRight: p = !1,
-    type: l = "number",
-    className: i,
+    withSymbol: m,
+    formatOptions: p,
+    alignRight: a = !1,
+    type: c = "number",
+    className: l,
     ...o
   } = t;
   return /* @__PURE__ */ e(
-    f,
+    u,
     {
-      className: I(i, d.InputCurrency),
-      formatter: (c) => C({
-        value: c,
-        locale: n,
+      className: C(l, d.InputCurrency),
+      formatter: (i) => I({
+        value: i,
+        locale: s,
         currencyCode: r,
-        withSymbol: s,
-        formatOptions: a
+        withSymbol: m,
+        formatOptions: p
       }),
-      type: l,
-      append: /* @__PURE__ */ e(u, { color: "colour.neutral.70", children: r }),
+      type: c,
+      append: /* @__PURE__ */ e(f, { color: "colour.neutral.70", children: r }),
       inline: !!o.readOnly,
-      alignRight: p,
-      ref: m,
+      alignRight: a,
+      ref: n,
       ...o
     }
   );
-});
+}, b = y(x);
+b.displayName = "IressInputCurrency";
 export {
-  O as IressInputCurrency
+  b as IressInputCurrency
 };

package/dist/components/Label/Label.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+import { LabelBaseProps } from './LabelBase/LabelBase';
+type LabelElement<THtmlFor extends string | undefined = undefined> = THtmlFor extends string ? 'label' : 'strong';
+export type IressLabelProps<THtmlFor extends string | undefined = undefined> = Omit<LabelBaseProps<LabelElement<THtmlFor>>, 'element'> & {
+    /**
+     * Content to be displayed in the label.
+     * This can also include error messages to make sure it makes sense in this context.
+     */
+    children: ReactNode;
+    /**
+     * Used to connect it to the input element, it should be the input's id.
+     * If provided, the label will be rendered as a `<label>` element, otherwise it will be rendered as a `<strong>` element.
+     *
+     * [Learn more](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/for)
+     */
+    htmlFor?: THtmlFor;
+};
+export declare const IressLabel: {
+    <THtmlFor extends string | undefined = undefined>(props: IressLabelProps<THtmlFor>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/components/Label/Label.js

@@ -1,6 +1,7 @@
-import { jsx as o } from "react/jsx-runtime";
+import { jsx as l } from "react/jsx-runtime";
 import { LabelBase as r } from "./LabelBase/LabelBase.js";
-const m = (e) => /* @__PURE__ */ o(r, { ...e, element: e.htmlFor ? "label" : "strong" });
+const s = (e) => /* @__PURE__ */ l(r, { ...e, element: e.htmlFor ? "label" : "strong" });
+s.displayName = "IressLabel";
 export {
-  m as IressLabel
+  s as IressLabel
 };

package/dist/components/Label/Label.styles.js

@@ -1,5 +1,5 @@
-import { s as t } from "../../sva-OmxClA9g.js";
-const e = t({
+import { s as t } from "../../sva-CsHRIRDW.js";
+const o = t({
   slots: ["root", "required", "text"],
   base: {
     root: {
@@ -9,12 +9,12 @@ const e = t({
       color: "colour.system.danger.text",
       display: "inline-block",
       position: "relative",
-      textStyle: "typography.body.sm.strong",
+      textStyle: "typography.body.sm.medium",
       top: "-spacing.1",
       mr: "spacing.1"
     },
     text: {
-      textStyle: "typography.body.md.strong"
+      textStyle: "typography.body.md.medium"
     }
   },
   compoundVariants: [
@@ -30,5 +30,5 @@ const e = t({
   ]
 });
 export {
-  e as label
+  o as label
 };