@payfit/unity-components 3.23.15 → 3.23.17

package/dist/esm/modules/ai-kit/components/ai-structured-input/parts/AIStructuredInputFreeTextAnswer.js

@@ -0,0 +1,125 @@
+import { Icon as e } from "../../../../../core/components/icon/Icon.js";
+import { CircularIconButton as t } from "../../../../../core/components/icon-button/CircularIconButton.js";
+import { Text as n } from "../../../../../core/components/text/Text.js";
+import { forwardRef as r, useId as i } from "react";
+import { uyMerge as a, uyTv as o } from "@payfit/unity-themes";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { useIntl as l } from "react-intl";
+import { TextArea as u } from "react-aria-components/TextArea";
+//#region src/modules/ai-kit/components/ai-structured-input/parts/AIStructuredInputFreeTextAnswer.tsx
+var d = o({ slots: {
+	base: [
+		"uy:group uy:relative uy:flex uy:max-h-[180px] uy:flex-col uy:justify-end uy:gap-100",
+		"uy:overflow-hidden uy:rounded-150 uy:border uy:border-solid uy:border-transparent uy:p-125 uy:bg-transparent",
+		"uy:hover:border-border-neutral-hover",
+		"uy:hover:bg-surface-neutral-enabled",
+		"uy:focus-within:border-border-neutral-hover",
+		"uy:focus-within:bg-surface-neutral-enabled uy:focus-within:ring-2",
+		"uy:focus-within:ring-utility-focus-ring uy:focus-within:ring-offset-2",
+		"uy:data-[active=true]:border-border-neutral-active uy:data-[active=true]:bg-surface-neutral-enabled",
+		"uy:data-[loading=true]:border-border-neutral-enabled uy:data-[loading=true]:bg-surface-neutral-enabled",
+		"uy:data-[invalid=true]:border-border-danger uy:data-[invalid=true]:bg-surface-neutral-enabled",
+		"uy:data-[disabled=true]:bg-surface-neutral-disabled"
+	],
+	row: "uy:flex uy:w-full uy:min-w-0 uy:items-end",
+	icon: [
+		"uy:mr-100 uy:flex uy:h-300 uy:w-300 uy:shrink-0 uy:items-center uy:justify-center uy:overflow-hidden",
+		"uy:text-content-neutral-lowest",
+		"uy:group-focus-within:mr-0 uy:group-focus-within:w-0 uy:group-focus-within:opacity-0",
+		"uy:group-data-[icon-hidden=true]:mr-0 uy:group-data-[icon-hidden=true]:w-0 uy:group-data-[icon-hidden=true]:opacity-0",
+		"uy:motion-safe:transition-[width,margin,opacity] uy:motion-safe:duration-150 uy:motion-safe:ease-out"
+	],
+	input: [
+		"uy:field-sizing-content uy:max-h-[160px] uy:min-h-300 uy:min-w-0 uy:flex-1",
+		"uy:resize-none uy:overflow-y-auto uy:bg-transparent uy:p-0",
+		"uy:typography-body uy:text-content-neutral uy:placeholder:text-content-neutral-lowest",
+		"uy:disabled:cursor-not-allowed uy:disabled:text-content-neutral-disabled",
+		"uy:disabled:placeholder:text-content-neutral-disabled uy:outline-none"
+	],
+	action: ["uy:shrink-0 uy:data-[active=true]:bg-surface-inverted", "uy:data-[active=true]:text-content-inverted-enabled"],
+	actionContainer: [
+		"uy:ml-100 uy:shrink-0 uy:scale-100 uy:opacity-100",
+		"uy:motion-safe:transition-[opacity,scale] uy:motion-safe:duration-150 uy:motion-safe:ease-out",
+		"uy:motion-safe:starting:scale-90 uy:motion-safe:starting:opacity-80"
+	],
+	feedback: "uy:flex uy:w-full uy:items-center uy:gap-50"
+} }), f = r(({ value: r, onChange: o, onSubmit: f, isDisabled: p = !1, isLoading: m = !1, isInvalid: h = !1, feedbackMessage: g, feedbackId: _, submitAriaLabel: v, className: y, onKeyDown: b, "aria-describedby": x, ...S }, C) => {
+	let w = l(), T = i(), E = _ ?? T, D = r.trim().length > 0, O = D || p || h || m, { action: k, actionContainer: A, base: j, feedback: M, icon: N, input: P, row: F } = d(), I = w.formatMessage({
+		id: "unity:module:ai-kit:structured-input:free-text-submit",
+		defaultMessage: "Save answer and continue"
+	}), L = (e) => {
+		b?.(e), !(e.defaultPrevented || e.key !== "Enter" || e.shiftKey || e.nativeEvent.isComposing) && (e.preventDefault(), D && !p && !m && f());
+	};
+	return /* @__PURE__ */ c("div", {
+		className: a(j(), y),
+		"data-disabled": p || void 0,
+		"data-active": D || void 0,
+		"data-has-value": D || void 0,
+		"data-icon-hidden": D || p || h || m || void 0,
+		"data-invalid": h || void 0,
+		"data-loading": m || void 0,
+		"data-unity-slot": "ai.structured-input.free-text-answer",
+		children: [/* @__PURE__ */ c("div", {
+			className: F(),
+			children: [
+				/* @__PURE__ */ s(e, {
+					src: "PencilSimpleOutlined",
+					size: 20,
+					role: "presentation",
+					className: N(),
+					"aria-hidden": "true"
+				}),
+				/* @__PURE__ */ s(u, {
+					...S,
+					ref: C,
+					value: r,
+					onChange: o,
+					onKeyDown: L,
+					disabled: p,
+					"aria-invalid": h || void 0,
+					"aria-describedby": g ? [x, E].filter(Boolean).join(" ") : x,
+					className: P(),
+					"data-dd-privacy": "mask",
+					"data-unity-slot": "ai.structured-input.free-text-answer-input"
+				}),
+				O && /* @__PURE__ */ s("span", {
+					className: A(),
+					children: /* @__PURE__ */ s(t, {
+						asElement: "button",
+						type: "button",
+						icon: "ArrowUpOutlined",
+						title: v ?? I,
+						"aria-label": v ?? I,
+						color: "content.neutral",
+						size: "default",
+						className: k(),
+						isDisabled: p || m || !D,
+						isLoading: m,
+						onPress: f,
+						"data-active": D || void 0,
+						"data-unity-slot": "ai.structured-input.free-text-answer-submit"
+					})
+				})
+			]
+		}), g && /* @__PURE__ */ c("div", {
+			className: M(),
+			role: "alert",
+			children: [/* @__PURE__ */ s(e, {
+				src: "WarningCircleOutlined",
+				size: 20,
+				color: "content.danger",
+				role: "presentation",
+				"aria-hidden": "true"
+			}), /* @__PURE__ */ s(n, {
+				id: E,
+				variant: "bodySmallStrong",
+				color: "content.danger",
+				children: g
+			})]
+		})]
+	});
+});
+f.displayName = "AIStructuredInputFreeTextAnswer";
+var p = f;
+//#endregion
+export { p as AIStructuredInputFreeTextAnswer };

package/dist/esm/modules/ai-kit/components/ai-structured-input/parts/AIStructuredInputHeader.d.ts

@@ -0,0 +1,43 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+/** Props for the banner above an `AIStructuredInput` question sequence. */
+export type AIStructuredInputHeaderProps = Omit<ComponentPropsWithoutRef<'header'>, 'children' | 'className' | 'title'> & {
+    /** Required header label. */
+    title: ReactNode;
+    /** Closes the structured-input surface. */
+    onClose: () => void;
+    /** Adds styling to the banner. */
+    className?: string;
+};
+/**
+ * Renders the AI label and a close action above an `AIStructuredInput` question card.
+ * Pass it through the root's `header` prop so the root can manage the complete
+ * surface layout.
+ * @param props - Header label, close action, and standard header attributes.
+ * @example
+ * ```tsx
+ * import { AIStructuredInputHeader } from '@payfit/unity-components/ai-kit'
+ *
+ * <AIStructuredInput
+ *   aria-label="Bonus questions"
+ *   header={
+ *     <AIStructuredInputHeader
+ *       title="Bonus questions"
+ *       onClose={closeQuestions}
+ *     />
+ *   }
+ * >
+ *   ...
+ * </AIStructuredInput>
+ * ```
+ * @see {@link AIStructuredInputHeaderProps} for all available props.
+ * @param props.title - Required configurable label.
+ * @see {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library?node-id=25390-31142 Figma design}
+ */
+export declare const AIStructuredInputHeader: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "children" | "className" | "title"> & {
+    /** Required header label. */
+    title: ReactNode;
+    /** Closes the structured-input surface. */
+    onClose: () => void;
+    /** Adds styling to the banner. */
+    className?: string;
+} & import('react').RefAttributes<HTMLElement>>;

package/dist/esm/modules/ai-kit/components/ai-structured-input/parts/AIStructuredInputHeader.js

@@ -0,0 +1,42 @@
+import { Icon as e } from "../../../../../core/components/icon/Icon.js";
+import { CircularIconButton as t } from "../../../../../core/components/icon-button/CircularIconButton.js";
+import { Text as n } from "../../../../../core/components/text/Text.js";
+import { forwardRef as r } from "react";
+import { uyMerge as i } from "@payfit/unity-themes";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { useIntl as s } from "react-intl";
+//#region src/modules/ai-kit/components/ai-structured-input/parts/AIStructuredInputHeader.tsx
+var c = r(({ title: r, onClose: c, className: l, ...u }, d) => {
+	let f = s();
+	return /* @__PURE__ */ o("header", {
+		...u,
+		ref: d,
+		className: i("uy:flex uy:w-full uy:items-center uy:justify-between uy:rounded-t-200", "uy:bg-surface-neutral-lowest uy:py-75 uy:pl-150 uy:pr-75", l),
+		"data-unity-slot": "ai.structured-input.header",
+		children: [/* @__PURE__ */ o("div", {
+			className: "uy:flex uy:min-w-0 uy:items-center uy:gap-50",
+			children: [/* @__PURE__ */ a(e, {
+				src: "InfoOutlined",
+				size: 20,
+				color: "content.neutral.low",
+				"aria-hidden": "true",
+				role: "presentation"
+			}), /* @__PURE__ */ a(n, {
+				asElement: "span",
+				variant: "bodySmallStrong",
+				color: "content.neutral.low",
+				className: "uy:min-w-0",
+				isTruncated: !0,
+				children: r
+			})]
+		}), /* @__PURE__ */ a(t, {
+			type: "button",
+			icon: "CloseOutlined",
+			title: f.formatMessage({ id: "unity:component:common:close:label" }),
+			onPress: c
+		})]
+	});
+});
+c.displayName = "AIStructuredInputHeader";
+//#endregion
+export { c as AIStructuredInputHeader };

package/dist/esm/modules/ai-kit/components/ai-structured-input/parts/AIStructuredInputStep.d.ts

@@ -0,0 +1,43 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+/** Props for one explicitly identified question in an `AIStructuredInput`. */
+export type AIStructuredInputStepProps = Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'className'> & {
+    /** Stable, explicit identity for this question and its consumer-owned draft. */
+    id: string;
+    /** Question prompt, answer control, and any other step-specific content. */
+    children: ReactNode;
+    /** Adds styles to the step content wrapper. */
+    className?: string;
+};
+/**
+ * Marks one question and answer region in an `AIStructuredInput` sequence.
+ *
+ * Give every step a stable, explicit `id`. The root uses it for navigation
+ * identity; consumers can use the same value to key answer drafts that must
+ * survive when inactive steps unmount. Use `AIStructuredInputStepTitle` as the
+ * first child when the sequence should place navigation beside the question.
+ * @param props - Step identity, content, and container attributes.
+ * @param props.id - Explicit stable identity for this question and its draft.
+ * @param props.children - Question content, including its answer control.
+ * @param props.className - Additional classes for the step wrapper.
+ * @remarks
+ * - Inactive steps are unmounted by `AIStructuredInput`.
+ * - Keep answer values in consumer-owned state if they must persist across navigation.
+ * @example
+ * ```tsx
+ * <AIStructuredInputStep id="start-date">
+ *   <AIStructuredInputStepTitle>Choose the start date</AIStructuredInputStepTitle>
+ *   <DateCalendar aria-label="Start date" />
+ * </AIStructuredInputStep>
+ * ```
+ * @see {@link AIStructuredInputStepProps} for all available props.
+ * @see {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/modules/ai-kit/components/ai-structured-input/parts Source code}
+ * @see {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library?node-id=25380-10878 Figma design}
+ */
+export declare const AIStructuredInputStep: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children" | "className"> & {
+    /** Stable, explicit identity for this question and its consumer-owned draft. */
+    id: string;
+    /** Question prompt, answer control, and any other step-specific content. */
+    children: ReactNode;
+    /** Adds styles to the step content wrapper. */
+    className?: string;
+} & import('react').RefAttributes<HTMLDivElement>>;

package/dist/esm/modules/ai-kit/components/ai-structured-input/parts/AIStructuredInputStep.js

@@ -0,0 +1,14 @@
+import { forwardRef as e } from "react";
+import { uyTv as t } from "@payfit/unity-themes";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/modules/ai-kit/components/ai-structured-input/parts/AIStructuredInputStep.tsx
+var r = t({ base: "uy:flex uy:min-w-0 uy:flex-col uy:gap-150" }), i = e(({ id: e, children: t, className: i, ...a }, o) => /* @__PURE__ */ n("div", {
+	...a,
+	ref: o,
+	className: r({ className: i }),
+	"data-step-id": e,
+	children: t
+}));
+i.displayName = "AIStructuredInputStep";
+//#endregion
+export { i as AIStructuredInputStep };

package/dist/esm/modules/ai-kit/components/ai-structured-input/parts/AIStructuredInputStepTitle.d.ts

@@ -0,0 +1,43 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { ValidTextElements } from '../../../../../core/components/text/Text.js';
+type HeadingElement = Extract<ValidTextElements, 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>;
+/** Props for a question title in an `AIStructuredInputStep`. */
+export type AIStructuredInputStepTitleProps = Omit<ComponentPropsWithoutRef<'h2'>, 'className'> & {
+    /** Semantic heading level used for the question prompt. Defaults to `h2`. */
+    asElement?: HeadingElement;
+    /** Adds styles to the title. */
+    className?: string;
+};
+/**
+ * Renders a semantic question heading and places sequence navigation beside it.
+ *
+ * Use this as the title of each `AIStructuredInputStep`. It renders a
+ * configurable heading with Unity's body-strong text style. Previous/next controls and the live
+ * question count appear alongside it when the sequence has multiple steps.
+ * After navigation, the new heading receives programmatic focus without
+ * becoming an extra Tab stop.
+ * @param props - Heading content and standard heading attributes.
+ * @param props.asElement - Semantic heading level; defaults to `h2`.
+ * @param props.className - Adds styles to the heading element.
+ * @remarks
+ * - The heading receives programmatic focus after sequence navigation.
+ * - The heading level can be adjusted to fit the surrounding page hierarchy.
+ * @example
+ * ```tsx
+ * <AIStructuredInputStep id="effective-date">
+ *   <AIStructuredInputStepTitle>
+ *     When should it take effect?
+ *   </AIStructuredInputStepTitle>
+ *   <DateCalendar aria-label="Effective date" />
+ * </AIStructuredInputStep>
+ * ```
+ * @see {@link AIStructuredInputStepTitleProps} for all available props.
+ * @see {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library?node-id=25380-13051 Figma design}
+ */
+export declare const AIStructuredInputStepTitle: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref">, "className"> & {
+    /** Semantic heading level used for the question prompt. Defaults to `h2`. */
+    asElement?: HeadingElement;
+    /** Adds styles to the title. */
+    className?: string;
+} & import('react').RefAttributes<HTMLHeadingElement>>;
+export {};

package/dist/esm/modules/ai-kit/components/ai-structured-input/parts/AIStructuredInputStepTitle.js

@@ -0,0 +1,78 @@
+import { CircularIconButton as e } from "../../../../../core/components/icon-button/CircularIconButton.js";
+import { Text as t } from "../../../../../core/components/text/Text.js";
+import { useAIStructuredInputContext as n } from "../AIStructuredInput.context.js";
+import { forwardRef as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { useIntl as o } from "react-intl";
+//#region src/modules/ai-kit/components/ai-structured-input/parts/AIStructuredInputStepTitle.tsx
+var s = r(({ children: r, tabIndex: s, asElement: c = "h2", ...l }, u) => {
+	let d = o(), f = n();
+	return /* @__PURE__ */ a("div", {
+		className: "uy:flex uy:w-full uy:min-w-0 uy:items-start uy:justify-between uy:gap-50",
+		children: [/* @__PURE__ */ i(t, {
+			...l,
+			ref: (e) => {
+				typeof u == "function" ? u(e) : u && (u.current = e), f?.registerStepHeading(f.activeStepId, e);
+			},
+			asElement: c,
+			tabIndex: s ?? -1,
+			variant: "bodyStrong",
+			color: "content.neutral",
+			className: "uy:text-pretty",
+			children: r
+		}), f && f.totalSteps > 1 && /* @__PURE__ */ a("div", {
+			className: "uy:flex uy:shrink-0 uy:items-center",
+			role: "group",
+			"aria-label": d.formatMessage({
+				id: "unity:module:ai-kit:structured-input:navigation",
+				defaultMessage: "Question navigation controls"
+			}),
+			children: [
+				/* @__PURE__ */ i(e, {
+					asElement: "button",
+					type: "button",
+					size: "default",
+					color: "content.neutral",
+					"aria-controls": f.stepPanelId,
+					icon: "CaretLeftOutlined",
+					title: d.formatMessage({
+						id: "unity:module:ai-kit:structured-input:previous-question",
+						defaultMessage: "Previous question"
+					}),
+					isDisabled: !f.canGoToPreviousStep,
+					onPress: f.goToPreviousStep
+				}),
+				/* @__PURE__ */ i(t, {
+					"aria-live": "polite",
+					"aria-atomic": "true",
+					variant: "bodySmall",
+					color: "content.neutral.lowest",
+					children: d.formatMessage({
+						id: "unity:module:ai-kit:structured-input:question-count",
+						defaultMessage: "{current} of {total}"
+					}, {
+						current: f.activeStepIndex + 1,
+						total: f.totalSteps
+					})
+				}),
+				/* @__PURE__ */ i(e, {
+					asElement: "button",
+					type: "button",
+					size: "default",
+					color: "content.neutral",
+					"aria-controls": f.stepPanelId,
+					icon: "CaretRightOutlined",
+					title: d.formatMessage({
+						id: "unity:module:ai-kit:structured-input:next-question",
+						defaultMessage: "Next question"
+					}),
+					isDisabled: !f.canGoToNextStep,
+					onPress: f.goToNextStep
+				})
+			]
+		})]
+	});
+});
+s.displayName = "AIStructuredInputStepTitle";
+//#endregion
+export { s as AIStructuredInputStepTitle };