@epam/ai-dial-builder-form 1.0.0-rc.4

package/components/BuilderFormBody/BuilderFormBody.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { BuilderFormBodyProps } from '../../models/builder-form-body-props';
+/** Builder form body split into start, main, and end columns — stacked on mobile, side by side on desktop. */
+export declare const BuilderFormBody: FC<BuilderFormBodyProps>;
+//# sourceMappingURL=BuilderFormBody.d.ts.map

package/components/BuilderFormBody/BuilderFormBody.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BuilderFormBody.d.ts","sourceRoot":"","sources":["../../../src/components/BuilderFormBody/BuilderFormBody.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AAOjF,8GAA8G;AAC9G,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CAsBpD,CAAC"}

package/components/BuilderFormContainer/BuilderFormContainer.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { BuilderFormContainerProps } from '../../models/builder-form-container-props';
+/** Full-height scrollable builder form page shell with a header above the form content. */
+export declare const BuilderFormContainer: FC<BuilderFormContainerProps>;
+//# sourceMappingURL=BuilderFormContainer.d.ts.map

package/components/BuilderFormContainer/BuilderFormContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BuilderFormContainer.d.ts","sourceRoot":"","sources":["../../../src/components/BuilderFormContainer/BuilderFormContainer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,2CAA2C,CAAC;AAK3F,2FAA2F;AAC3F,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC,yBAAyB,CAuC9D,CAAC"}

package/components/BuilderFormHeader/BuilderFormHeader.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { BuilderFormHeaderProps } from '../../models/builder-form-header-props';
+/** Builder form page header: a back control, the form title, and cancel/submit actions. */
+export declare const BuilderFormHeader: FC<BuilderFormHeaderProps>;
+//# sourceMappingURL=BuilderFormHeader.d.ts.map

package/components/BuilderFormHeader/BuilderFormHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BuilderFormHeader.d.ts","sourceRoot":"","sources":["../../../src/components/BuilderFormHeader/BuilderFormHeader.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,wCAAwC,CAAC;AAGrF,2FAA2F;AAC3F,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CAyDxD,CAAC"}

package/index.css

@@ -0,0 +1,2 @@
+._header_1m5zp_1{border-bottom-color:var(--bfh-border,var(--stroke-tertiary,#e0e6f0))}._title_1m5zp_5{font-family:var(--bfh-font-family,inherit)}._container_apxt7_1{background:var(--bfc-bg,var(--bg-layer-base,#f5f7fa))}
+/*$vite$:1*/

package/index.d.ts

@@ -0,0 +1,4 @@
+export { BuilderFormContainer } from './components/BuilderFormContainer/BuilderFormContainer';
+export type { BuilderFormContainerProps, BuilderFormContainerStyles, BuilderFormContainerColors, } from './models/builder-form-container-props';
+export type { BuilderFormHeaderLabels, BuilderFormHeaderStyles, BuilderFormHeaderColors, BuilderFormHeaderTypography, } from './models/builder-form-header-props';
+//# sourceMappingURL=index.d.ts.map

package/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,wDAAwD,CAAC;AAC9F,YAAY,EACV,yBAAyB,EACzB,0BAA0B,EAC1B,0BAA0B,GAC3B,MAAM,uCAAuC,CAAC;AAC/C,YAAY,EACV,uBAAuB,EACvB,uBAAuB,EACvB,uBAAuB,EACvB,2BAA2B,GAC5B,MAAM,oCAAoC,CAAC"}

package/index.js

@@ -0,0 +1,88 @@
+import { buildCssVars as e, mergeClasses as t } from "@epam/ai-dial-chat-shared";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { DIAL_ICON_SIZE as i, GhostIconButton as a, NeutralButton as o, PrimaryButton as s } from "@epam/ai-dial-ui-kit";
+import { IconArrowLeft as c } from "@tabler/icons-react";
+//#region src/components/BuilderFormBody/BuilderFormBody.tsx
+var l = "flex w-full flex-col desktop:w-[360px] desktop:shrink-0", u = ({ left: e, children: t, metadata: i }) => /* @__PURE__ */ r("div", {
+	className: "flex flex-1 flex-col desktop:flex-row",
+	children: [
+		e != null && /* @__PURE__ */ n("div", {
+			className: l,
+			children: e
+		}),
+		/* @__PURE__ */ n("div", {
+			className: "flex w-full min-w-0 flex-1 flex-col",
+			children: t
+		}),
+		i != null && /* @__PURE__ */ n("div", {
+			className: l,
+			children: i
+		}),
+		e != null && i == null && /* @__PURE__ */ n("div", {
+			"aria-hidden": !0,
+			className: "hidden desktop:block desktop:w-[360px] desktop:shrink-0"
+		})
+	]
+}), d = {
+	header: "_header_1m5zp_1",
+	title: "_title_1m5zp_5"
+}, f = ({ labels: l, onBack: u, onCancel: f, onSubmit: p, isCancelDisabled: m = !1, isSubmitDisabled: h = !1, styles: g }) => {
+	let { colors: _, typography: v } = g ?? {}, y = v?.fontClassName ?? "dial-h1-text", b = !!v?.fontClassName;
+	return /* @__PURE__ */ r("div", {
+		style: e({
+			"--bfh-border": _?.borderColor,
+			"--bfh-font-family": b ? void 0 : v?.fontFamily
+		}),
+		className: t("flex h-16 items-center justify-between gap-6 border-b px-8", d.header),
+		children: [/* @__PURE__ */ r("div", {
+			className: "flex min-w-0 flex-1 items-center gap-2",
+			children: [/* @__PURE__ */ n(a, {
+				icon: /* @__PURE__ */ n(c, {
+					size: i.LG,
+					className: "rtl:scale-x-[-1]",
+					"aria-hidden": !0
+				}),
+				"aria-label": l.backButtonLabel,
+				onClick: u
+			}), /* @__PURE__ */ n("h1", {
+				className: t("truncate", d.title, y),
+				children: l.title
+			})]
+		}), /* @__PURE__ */ r("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ n(o, {
+				label: l.cancelButtonLabel,
+				onClick: f,
+				disabled: m
+			}), /* @__PURE__ */ n(s, {
+				label: l.submitButtonLabel,
+				onClick: p,
+				disabled: h
+			})]
+		})]
+	});
+}, p = { container: "_container_apxt7_1" }, m = ({ labels: i, onBack: a, onCancel: o, onSubmit: s, isCancelDisabled: c = !1, isSubmitDisabled: l = !1, left: d, children: m, metadata: h, styles: g }) => {
+	let { colors: _, header: v, cssVars: y } = g ?? {};
+	return /* @__PURE__ */ r("div", {
+		style: {
+			...e({ "--bfc-bg": _?.background }),
+			...y
+		},
+		className: t("flex h-full w-full flex-col overflow-y-auto", p.container),
+		children: [/* @__PURE__ */ n(f, {
+			labels: i,
+			onBack: a,
+			onCancel: o,
+			onSubmit: s,
+			isCancelDisabled: c,
+			isSubmitDisabled: l,
+			styles: v
+		}), /* @__PURE__ */ n(u, {
+			left: d,
+			metadata: h,
+			children: m
+		})]
+	});
+};
+//#endregion
+export { m as BuilderFormContainer };

package/models/builder-form-body-props.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+/** Props for the {@link BuilderFormBody} component. */
+export interface BuilderFormBodyProps {
+    /** Start-edge column. Full width on mobile, a fixed-width column on desktop. */
+    left?: ReactNode;
+    /** Main column, filling the space left by `left` and `metadata`. */
+    children: ReactNode;
+    /** End-edge column, matching `left`'s width. When omitted while `left` is set, an empty column of the same width is reserved so the main column stays optically centered. */
+    metadata?: ReactNode;
+}
+//# sourceMappingURL=builder-form-body-props.d.ts.map

package/models/builder-form-body-props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"builder-form-body-props.d.ts","sourceRoot":"","sources":["../../src/models/builder-form-body-props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,uDAAuD;AACvD,MAAM,WAAW,oBAAoB;IACnC,gFAAgF;IAChF,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,oEAAoE;IACpE,QAAQ,EAAE,SAAS,CAAC;IACpB,6KAA6K;IAC7K,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB"}

package/models/builder-form-container-props.d.ts

@@ -0,0 +1,47 @@
+import { CSSProperties, ReactNode } from 'react';
+import { BuilderFormHeaderLabels, BuilderFormHeaderStyles } from './builder-form-header-props';
+/**
+ * Color overrides for the {@link BuilderFormContainer} component, applied as
+ * CSS custom properties with app theme fallbacks.
+ */
+export interface BuilderFormContainerColors {
+    /** Container background. Fallback: `--bg-layer-base`. */
+    background?: string;
+}
+/** Style overrides for the {@link BuilderFormContainer} component. */
+export interface BuilderFormContainerStyles {
+    /** Color overrides applied as CSS custom properties. */
+    colors?: BuilderFormContainerColors;
+    /** Style overrides forwarded to the header. */
+    header?: BuilderFormHeaderStyles;
+    /**
+     * Arbitrary CSS custom properties applied to the container's root element,
+     * so vars read anywhere in the form cascade from a single place. Merged
+     * after `colors`, so they can override it.
+     */
+    cssVars?: CSSProperties;
+}
+/** Props for the {@link BuilderFormContainer} component. */
+export interface BuilderFormContainerProps {
+    /** Localized labels for the header. */
+    labels: BuilderFormHeaderLabels;
+    /** Called when the user activates the header's back control. */
+    onBack: () => void;
+    /** Called when the user activates the header's cancel action. */
+    onCancel: () => void;
+    /** Called when the user activates the header's submit action. */
+    onSubmit: () => void;
+    /** When `true`, the header's cancel action is disabled. Defaults to `false`. */
+    isCancelDisabled?: boolean;
+    /** When `true`, the header's submit action is disabled. Defaults to `false`. */
+    isSubmitDisabled?: boolean;
+    /** Body's start-edge column. Full width on mobile, a fixed-width column on desktop. */
+    left?: ReactNode;
+    /** Body's main column, filling the space left by `left` and `metadata`. */
+    children: ReactNode;
+    /** Body's end-edge column, matching `left`'s width. When omitted while `left` is set, an empty column of the same width is reserved so the main column stays optically centered. */
+    metadata?: ReactNode;
+    /** Style overrides. */
+    styles?: BuilderFormContainerStyles;
+}
+//# sourceMappingURL=builder-form-container-props.d.ts.map

package/models/builder-form-container-props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"builder-form-container-props.d.ts","sourceRoot":"","sources":["../../src/models/builder-form-container-props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,KAAK,EACV,uBAAuB,EACvB,uBAAuB,EACxB,MAAM,6BAA6B,CAAC;AAErC;;;GAGG;AACH,MAAM,WAAW,0BAA0B;IACzC,yDAAyD;IACzD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,sEAAsE;AACtE,MAAM,WAAW,0BAA0B;IACzC,wDAAwD;IACxD,MAAM,CAAC,EAAE,0BAA0B,CAAC;IACpC,+CAA+C;IAC/C,MAAM,CAAC,EAAE,uBAAuB,CAAC;IACjC;;;;OAIG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB;AAED,4DAA4D;AAC5D,MAAM,WAAW,yBAAyB;IACxC,uCAAuC;IACvC,MAAM,EAAE,uBAAuB,CAAC;IAChC,gEAAgE;IAChE,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,iEAAiE;IACjE,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,iEAAiE;IACjE,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,gFAAgF;IAChF,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gFAAgF;IAChF,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,uFAAuF;IACvF,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,2EAA2E;IAC3E,QAAQ,EAAE,SAAS,CAAC;IACpB,oLAAoL;IACpL,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,uBAAuB;IACvB,MAAM,CAAC,EAAE,0BAA0B,CAAC;CACrC"}

package/models/builder-form-header-props.d.ts

@@ -0,0 +1,51 @@
+/** Localized labels used by the {@link BuilderFormHeader} component. */
+export interface BuilderFormHeaderLabels {
+    /** Title shown next to the back control. */
+    title: string;
+    /** Accessible label for the back control. */
+    backButtonLabel: string;
+    /** Label for the cancel action. */
+    cancelButtonLabel: string;
+    /** Label for the submit action. */
+    submitButtonLabel: string;
+}
+/**
+ * Color overrides for the {@link BuilderFormHeader} component, applied as CSS
+ * custom properties with app theme fallbacks.
+ */
+export interface BuilderFormHeaderColors {
+    /** Header's bottom border color. Fallback: `--stroke-tertiary`. */
+    borderColor?: string;
+}
+/** Typography overrides for the {@link BuilderFormHeader} component. */
+export interface BuilderFormHeaderTypography {
+    /** CSS class applied to the title. Defaults to `'dial-h1-text'`. */
+    fontClassName?: string;
+    /** Font family applied to the title. Ignored when `fontClassName` is set. */
+    fontFamily?: string;
+}
+/** Style overrides for the {@link BuilderFormHeader} component. */
+export interface BuilderFormHeaderStyles {
+    /** Color overrides applied as CSS custom properties. */
+    colors?: BuilderFormHeaderColors;
+    /** Typography overrides applied to the title. */
+    typography?: BuilderFormHeaderTypography;
+}
+/** Props for the {@link BuilderFormHeader} component. */
+export interface BuilderFormHeaderProps {
+    /** Localized labels. */
+    labels: BuilderFormHeaderLabels;
+    /** Called when the user activates the back control. */
+    onBack: () => void;
+    /** Called when the user activates the cancel action. */
+    onCancel: () => void;
+    /** Called when the user activates the submit action. */
+    onSubmit: () => void;
+    /** When `true`, the cancel action is disabled. Defaults to `false`. */
+    isCancelDisabled?: boolean;
+    /** When `true`, the submit action is disabled. Defaults to `false`. */
+    isSubmitDisabled?: boolean;
+    /** Style overrides. */
+    styles?: BuilderFormHeaderStyles;
+}
+//# sourceMappingURL=builder-form-header-props.d.ts.map

package/models/builder-form-header-props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"builder-form-header-props.d.ts","sourceRoot":"","sources":["../../src/models/builder-form-header-props.ts"],"names":[],"mappings":"AAAA,wEAAwE;AACxE,MAAM,WAAW,uBAAuB;IACtC,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,eAAe,EAAE,MAAM,CAAC;IACxB,mCAAmC;IACnC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,mCAAmC;IACnC,iBAAiB,EAAE,MAAM,CAAC;CAC3B;AAED;;;GAGG;AACH,MAAM,WAAW,uBAAuB;IACtC,mEAAmE;IACnE,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,wEAAwE;AACxE,MAAM,WAAW,2BAA2B;IAC1C,oEAAoE;IACpE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,6EAA6E;IAC7E,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,mEAAmE;AACnE,MAAM,WAAW,uBAAuB;IACtC,wDAAwD;IACxD,MAAM,CAAC,EAAE,uBAAuB,CAAC;IACjC,iDAAiD;IACjD,UAAU,CAAC,EAAE,2BAA2B,CAAC;CAC1C;AAED,yDAAyD;AACzD,MAAM,WAAW,sBAAsB;IACrC,wBAAwB;IACxB,MAAM,EAAE,uBAAuB,CAAC;IAChC,uDAAuD;IACvD,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,wDAAwD;IACxD,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,wDAAwD;IACxD,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,uEAAuE;IACvE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,uEAAuE;IACvE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,uBAAuB;IACvB,MAAM,CAAC,EAAE,uBAAuB,CAAC;CAClC"}

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@epam/ai-dial-builder-form",
+  "description": "Presentational builder form components for composing and editing DIAL entities",
+  "version": "1.0.0-rc.4",
+  "license": "Apache-2.0",
+  "type": "module",
+  "main": "./index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    "./styles.css": "./index.css",
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js",
+      "default": "./index.js"
+    }
+  },
+  "peerDependencies": {
+    "@epam/ai-dial-chat-shared": "1.0.0-rc.4",
+    "@epam/ai-dial-ui-kit": "^0.13.0-dev.26",
+    "@tabler/icons-react": "^3.44.0",
+    "react": "^19.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/epam/ai-dial-chat.git",
+    "directory": "libs/builder-form"
+  }
+}

package/test-setup.d.ts

@@ -0,0 +1 @@
+//# sourceMappingURL=test-setup.d.ts.map

package/test-setup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"test-setup.d.ts","sourceRoot":"","sources":["../src/test-setup.ts"],"names":[],"mappings":""}