@cube-dev/ui-kit 0.114.0 → 0.116.0

package/dist/components/form/Form/validation.js

@@ -0,0 +1,133 @@
+/** @license MIT | @cube-dev/ui-kit v0.116.0 | Cube Dev Team */
+import { validate } from "email-validator";
+import validUrl from "valid-url";
+
+//#region src/components/form/Form/validation.ts
+const TYPE_CHECKERS = {
+	string(v) {
+		return typeof v === "string";
+	},
+	number(v) {
+		return typeof v === "number";
+	},
+	boolean(v) {
+		return typeof v === "boolean";
+	},
+	method(v) {
+		return typeof v === "function";
+	},
+	regexp(v) {
+		return v instanceof RegExp;
+	},
+	integer(v) {
+		return typeof v === "number" && v === parseInt(String(v), 10);
+	},
+	array(v) {
+		return Array.isArray(v);
+	},
+	object(v) {
+		return typeof v === "object" && !Array.isArray(v);
+	},
+	date(v) {
+		return v instanceof Date;
+	},
+	url(v) {
+		return typeof v === "string" && validUrl.isUri(v);
+	},
+	hex(v) {
+		return typeof v === "string" && v.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/);
+	},
+	email(v) {
+		return validate(v);
+	},
+	any(v) {
+		return true;
+	}
+};
+const TYPE_LIST = Object.keys(TYPE_CHECKERS);
+const VALIDATORS = {
+	async required(value, rule) {
+		if (!rule.required) return Promise.resolve();
+		if (Array.isArray(value)) return value.length ? Promise.resolve() : Promise.reject();
+		return !!value || value === 0 ? Promise.resolve() : Promise.reject();
+	},
+	async whitespace(value) {
+		if (typeof value !== "string" || value.trim()) return Promise.resolve();
+		return Promise.reject();
+	},
+	async pattern(value, rule) {
+		const pattern = rule.pattern;
+		if (typeof value !== "string") return Promise.resolve();
+		return value.match(pattern) ? Promise.resolve() : Promise.reject();
+	},
+	async enum(value, rule) {
+		const options = rule.enum || [];
+		if (!value && value !== 0) return Promise.resolve();
+		return options.includes(value) ? Promise.resolve() : Promise.reject();
+	},
+	async len(value, rule) {
+		const len = rule.len;
+		if (typeof value === "number") return value === len ? Promise.resolve() : Promise.reject();
+		if (!value || !("length" in value)) return Promise.resolve();
+		return value.length === len ? Promise.resolve() : Promise.reject();
+	},
+	async max(value, rule) {
+		const max = rule.max;
+		if (typeof value === "number") return value <= max ? Promise.resolve() : Promise.reject();
+		if (!value || typeof value !== "string" && !Array.isArray(value)) return Promise.resolve();
+		return value.length <= max ? Promise.resolve() : Promise.reject();
+	},
+	async min(value, rule) {
+		const min = rule.min;
+		if (typeof value === "number") return value >= min ? Promise.resolve() : Promise.reject();
+		if (!value || typeof value !== "string" && !Array.isArray(value)) return Promise.resolve();
+		return value.length >= min ? Promise.resolve() : Promise.reject();
+	},
+	async validator(value, rule) {
+		return rule.validator(rule, value);
+	},
+	async type(value, rule) {
+		const type = rule.type;
+		if (!TYPE_LIST.includes(type)) return Promise.resolve();
+		return TYPE_CHECKERS[type](value) ? Promise.resolve() : Promise.reject();
+	}
+};
+const VALIDATOR_NAMES = Object.keys(VALIDATORS);
+async function applyRule(value, rule, form) {
+	if (typeof rule === "function") rule = rule(form);
+	if (typeof rule.transform === "function") value = rule.transform(value);
+	for (let validatorName of VALIDATOR_NAMES) {
+		if (!(validatorName in rule)) continue;
+		const checker = VALIDATORS[validatorName];
+		await checker(value, rule);
+	}
+}
+async function applyRules(field, form, validationId = 0) {
+	const { value, rules } = field;
+	if (!rules || !rules.length) return;
+	for (let rule of rules) {
+		if (field.validationId && validationId !== field.validationId) return;
+		await applyRule(value, rule, form).catch((err) => {
+			if (err instanceof Error) err = err?.message || rule.message;
+			throw err || rule.message;
+		});
+	}
+}
+const delayValidationRule = (timeout = 500) => {
+	let timeoutId;
+	let storedResolve;
+	return { async validator() {
+		clearTimeout(timeoutId);
+		if (storedResolve) storedResolve();
+		return new Promise((resolve) => {
+			storedResolve = resolve;
+			timeoutId = setTimeout(() => {
+				resolve();
+			}, timeout);
+		});
+	} };
+};
+
+//#endregion
+export { applyRules, delayValidationRule };
+//# sourceMappingURL=validation.js.map

package/dist/components/form/Form/validation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validation.js","names":["validateEmail"],"sources":["../../../../src/components/form/Form/validation.ts"],"sourcesContent":["import { validate as validateEmail } from 'email-validator';\nimport validUrl from 'valid-url';\n\nconst TYPE_CHECKERS = {\n  string(v) {\n    return typeof v === 'string';\n  },\n  number(v) {\n    return typeof v === 'number';\n  },\n  boolean(v) {\n    return typeof v === 'boolean';\n  },\n  method(v) {\n    return typeof v === 'function';\n  },\n  regexp(v) {\n    return v instanceof RegExp;\n  },\n  integer(v) {\n    return typeof v === 'number' && v === parseInt(String(v), 10);\n  },\n  array(v) {\n    return Array.isArray(v);\n  },\n  object(v) {\n    return typeof v === 'object' && !Array.isArray(v);\n  },\n  date(v) {\n    return v instanceof Date;\n  },\n  url(v) {\n    return typeof v === 'string' && validUrl.isUri(v);\n  },\n  hex(v) {\n    return typeof v === 'string' && v.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/);\n  },\n  email(v) {\n    return validateEmail(v);\n  },\n  any(v) {\n    return true;\n  },\n};\n\nconst TYPE_LIST = Object.keys(TYPE_CHECKERS);\n\nconst VALIDATORS = {\n  async required(value, rule) {\n    if (!rule.required) return Promise.resolve();\n\n    if (Array.isArray(value)) {\n      return value.length ? Promise.resolve() : Promise.reject();\n    }\n\n    return !!value || value === 0 ? Promise.resolve() : Promise.reject();\n  },\n  async whitespace(value) {\n    if (typeof value !== 'string' || value.trim()) return Promise.resolve();\n\n    return Promise.reject();\n  },\n  async pattern(value, rule) {\n    const pattern = rule.pattern;\n\n    if (typeof value !== 'string') return Promise.resolve();\n\n    return value.match(pattern) ? Promise.resolve() : Promise.reject();\n  },\n  async enum(value, rule) {\n    const options = rule.enum || [];\n\n    if (!value && value !== 0) return Promise.resolve();\n\n    return options.includes(value) ? Promise.resolve() : Promise.reject();\n  },\n  async len(value, rule) {\n    const len = rule.len;\n\n    if (typeof value === 'number') {\n      return value === len ? Promise.resolve() : Promise.reject();\n    }\n\n    if (!value || !('length' in value)) return Promise.resolve();\n\n    return value.length === len ? Promise.resolve() : Promise.reject();\n  },\n  async max(value, rule) {\n    const max = rule.max;\n\n    if (typeof value === 'number') {\n      return value <= max ? Promise.resolve() : Promise.reject();\n    }\n\n    if (!value || (typeof value !== 'string' && !Array.isArray(value)))\n      return Promise.resolve();\n\n    return value.length <= max ? Promise.resolve() : Promise.reject();\n  },\n  async min(value, rule) {\n    const min = rule.min;\n\n    if (typeof value === 'number') {\n      return value >= min ? Promise.resolve() : Promise.reject();\n    }\n\n    if (!value || (typeof value !== 'string' && !Array.isArray(value)))\n      return Promise.resolve();\n\n    return value.length >= min ? Promise.resolve() : Promise.reject();\n  },\n  async validator(value, rule) {\n    return rule.validator(rule, value);\n  },\n  async type(value, rule) {\n    const type = rule.type;\n\n    if (!TYPE_LIST.includes(type)) return Promise.resolve();\n\n    return TYPE_CHECKERS[type](value) ? Promise.resolve() : Promise.reject();\n  },\n};\n\nconst VALIDATOR_NAMES = Object.keys(VALIDATORS);\n\nexport async function applyRule(value, rule, form) {\n  if (typeof rule === 'function') {\n    rule = rule(form);\n  }\n\n  if (typeof rule.transform === 'function') {\n    value = rule.transform(value);\n  }\n\n  for (let validatorName of VALIDATOR_NAMES) {\n    if (!(validatorName in rule)) continue;\n\n    const checker = VALIDATORS[validatorName];\n\n    await checker(value, rule);\n  }\n}\n\nexport async function applyRules(field, form, validationId = 0) {\n  const { value, rules } = field;\n\n  if (!rules || !rules.length) return;\n\n  for (let rule of rules) {\n    if (field.validationId && validationId !== field.validationId) return;\n\n    await applyRule(value, rule, form).catch((err) => {\n      if (err instanceof Error) {\n        err = err?.message || rule.message;\n      }\n\n      throw err || rule.message;\n    });\n  }\n}\n\nexport const delayValidationRule = (timeout = 500) => {\n  let timeoutId: ReturnType<typeof setTimeout>;\n  let storedResolve: () => void;\n\n  return {\n    async validator(): Promise<void> {\n      clearTimeout(timeoutId);\n\n      if (storedResolve) {\n        storedResolve();\n      }\n\n      return new Promise((resolve) => {\n        storedResolve = resolve;\n\n        timeoutId = setTimeout(() => {\n          resolve();\n        }, timeout);\n      });\n    },\n  };\n};\n"],"mappings":"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"}

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

@@ -0,0 +1,25 @@
+
+import { Styles } from "../../tasty/styles/types.js";
+import { BaseProps, ContainerStyleProps } from "../../tasty/types.js";
+import "../../tasty/index.js";
+import { LabelPosition, NecessityIndicator, ValidationState } from "../../shared/form.js";
+import "../../shared/index.js";
+import * as react from "react";
+
+//#region src/components/form/Label.d.ts
+declare const INLINE_LABEL_STYLES: Styles;
+declare const LABEL_STYLES: Styles;
+interface CubeLabelProps extends BaseProps, ContainerStyleProps {
+  labelPosition?: LabelPosition;
+  necessityIndicator?: NecessityIndicator;
+  isRequired?: boolean;
+  includeNecessityIndicatorInAccessibilityName?: boolean;
+  htmlFor?: string;
+  for?: string;
+  validationState?: ValidationState;
+  size?: 'medium' | 'small';
+}
+declare let _Label: react.ForwardRefExoticComponent<CubeLabelProps & react.RefAttributes<unknown>>;
+//#endregion
+export { CubeLabelProps, INLINE_LABEL_STYLES, LABEL_STYLES, _Label };
+//# sourceMappingURL=Label.d.ts.map

package/dist/components/form/Label.js

@@ -0,0 +1,100 @@
+/** @license MIT | @cube-dev/ui-kit v0.116.0 | Cube Dev Team */
+import { extractStyles } from "../../tasty/utils/styles.js";
+import { CONTAINER_STYLES } from "../../tasty/styles/list.js";
+import { tasty } from "../../tasty/tasty.js";
+import { filterBaseProps } from "../../tasty/utils/filter-base-props.js";
+import { useProviderProps } from "../../provider.js";
+import { forwardRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useDOMRef } from "@react-spectrum/utils";
+
+//#region src/components/form/Label.tsx
+const REQUIRED_ICON = /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	version: "1.1",
+	x: "0px",
+	y: "0px",
+	viewBox: "0 0 100 125",
+	style: {
+		enableBackground: "new 0 0 100 100",
+		width: ".8em",
+		height: ".8em",
+		transform: "rotate(-5deg)"
+	},
+	children: /* @__PURE__ */ jsx("switch", { children: /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx("polygon", {
+		fill: "currentColor",
+		points: "97.5,47.5 90.5,26.1 61.3,35.6 61.3,4.8 38.7,4.8 38.7,35.6 9.5,26.1 2.5,47.5 31.8,57 13.7,82 31.9,95.2     50,70.3 68.1,95.2 86.3,82 68.2,57"
+	}) }) })
+});
+const INTL_MESSAGES = {
+	"(required)": "(required)",
+	"(optional)": "(optional)"
+};
+const INLINE_LABEL_STYLES = {
+	preset: "t3",
+	color: {
+		"": "#dark-02",
+		invalid: "#danger-text"
+	}
+};
+const LABEL_STYLES = {
+	display: "block",
+	preset: {
+		"": "t3m",
+		"size=small": "t4"
+	},
+	color: {
+		"": "#dark",
+		invalid: "#danger-text"
+	},
+	width: {
+		"": "initial",
+		side: "($label-width, initial)",
+		split: "initial"
+	}
+};
+const LabelElement = tasty({
+	as: "label",
+	qa: "Label",
+	styles: LABEL_STYLES
+});
+function Label(props, ref) {
+	props = useProviderProps(props);
+	let { as, qa, children, labelPosition = "top", isRequired, necessityIndicator = isRequired != null ? "icon" : null, includeNecessityIndicatorInAccessibilityName = false, htmlFor, isDisabled, validationState, size = "medium", for: labelFor, ...otherProps } = props;
+	let domRef = useDOMRef(ref);
+	const styles = extractStyles(otherProps, CONTAINER_STYLES);
+	let formatMessage = (message) => INTL_MESSAGES[message];
+	let necessityLabel = isRequired ? formatMessage("(required)") : formatMessage("(optional)");
+	let icon = /* @__PURE__ */ jsx("span", {
+		"aria-label": includeNecessityIndicatorInAccessibilityName ? formatMessage("(required)") : void 0,
+		children: REQUIRED_ICON
+	});
+	return /* @__PURE__ */ jsx(LabelElement, {
+		...filterBaseProps(otherProps),
+		ref: domRef,
+		styles,
+		htmlFor: labelFor || htmlFor,
+		"data-size": size,
+		mods: {
+			side: labelPosition === "side",
+			disabled: isDisabled,
+			invalid: validationState === "invalid",
+			valid: validationState === "valid"
+		},
+		children: typeof children !== "string" ? children : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			children,
+			(necessityIndicator === "label" || necessityIndicator === "icon" && isRequired) && " ​",
+			necessityIndicator === "label" && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": !includeNecessityIndicatorInAccessibilityName ? isRequired : void 0,
+				children: necessityLabel
+			}),
+			necessityIndicator === "icon" && isRequired && icon
+		] })
+	});
+}
+let _Label = forwardRef(Label);
+_Label.displayName = "Label";
+
+//#endregion
+export { INLINE_LABEL_STYLES, LABEL_STYLES, _Label };
+//# sourceMappingURL=Label.js.map

package/dist/components/form/Label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.js","names":[],"sources":["../../../src/components/form/Label.tsx"],"sourcesContent":["import { useDOMRef } from '@react-spectrum/utils';\nimport { forwardRef } from 'react';\n\nimport { useProviderProps } from '../../provider';\nimport {\n  LabelPosition,\n  NecessityIndicator,\n  ValidationState,\n} from '../../shared/index';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  extractStyles,\n  filterBaseProps,\n  Styles,\n  tasty,\n} from '../../tasty/index';\n\nconst REQUIRED_ICON = (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    version=\"1.1\"\n    x=\"0px\"\n    y=\"0px\"\n    viewBox=\"0 0 100 125\"\n    style={{\n      // @ts-ignore\n      enableBackground: 'new 0 0 100 100',\n      width: '.8em',\n      height: '.8em',\n      transform: 'rotate(-5deg)',\n    }}\n  >\n    <switch>\n      <g>\n        <polygon\n          fill=\"currentColor\"\n          points=\"97.5,47.5 90.5,26.1 61.3,35.6 61.3,4.8 38.7,4.8 38.7,35.6 9.5,26.1 2.5,47.5 31.8,57 13.7,82 31.9,95.2     50,70.3 68.1,95.2 86.3,82 68.2,57\"\n        />\n      </g>\n    </switch>\n  </svg>\n);\n\nconst INTL_MESSAGES = {\n  '(required)': '(required)',\n  '(optional)': '(optional)',\n};\n\nexport const INLINE_LABEL_STYLES: Styles = {\n  preset: 't3',\n  color: {\n    '': '#dark-02',\n    invalid: '#danger-text',\n  },\n} as const;\n\nexport const LABEL_STYLES: Styles = {\n  display: 'block',\n  preset: {\n    '': 't3m',\n    'size=small': 't4',\n  },\n  color: {\n    '': '#dark',\n    invalid: '#danger-text',\n  },\n  width: {\n    '': 'initial',\n    side: '($label-width, initial)',\n    split: 'initial',\n  },\n};\n\nconst LabelElement = tasty({\n  as: 'label',\n  qa: 'Label',\n  styles: LABEL_STYLES,\n});\n\nexport interface CubeLabelProps extends BaseProps, ContainerStyleProps {\n  labelPosition?: LabelPosition;\n  necessityIndicator?: NecessityIndicator;\n  isRequired?: boolean;\n  includeNecessityIndicatorInAccessibilityName?: boolean;\n  htmlFor?: string;\n  for?: string;\n  validationState?: ValidationState;\n  size?: 'medium' | 'small';\n}\n\nfunction Label(props: CubeLabelProps, ref) {\n  props = useProviderProps<CubeLabelProps>(props);\n\n  let {\n    as,\n    qa,\n    children,\n    labelPosition = 'top',\n    isRequired,\n    necessityIndicator = isRequired != null ? 'icon' : null,\n    includeNecessityIndicatorInAccessibilityName = false,\n    htmlFor,\n    isDisabled,\n    validationState,\n    size = 'medium',\n    for: labelFor,\n    ...otherProps\n  } = props;\n\n  let domRef = useDOMRef(ref);\n\n  const styles = extractStyles(otherProps, CONTAINER_STYLES);\n\n  let formatMessage = (message) => INTL_MESSAGES[message];\n  let necessityLabel = isRequired\n    ? formatMessage('(required)')\n    : formatMessage('(optional)');\n  let icon = (\n    <span\n      aria-label={\n        includeNecessityIndicatorInAccessibilityName\n          ? formatMessage('(required)')\n          : undefined\n      }\n    >\n      {REQUIRED_ICON}\n    </span>\n  );\n\n  return (\n    <LabelElement\n      {...filterBaseProps(otherProps)}\n      ref={domRef}\n      styles={styles}\n      htmlFor={labelFor || htmlFor}\n      data-size={size}\n      mods={{\n        side: labelPosition === 'side',\n        disabled: isDisabled,\n        invalid: validationState === 'invalid',\n        valid: validationState === 'valid',\n      }}\n    >\n      {typeof children !== 'string' ? (\n        children\n      ) : (\n        <>\n          {children}\n          {(necessityIndicator === 'label' ||\n            (necessityIndicator === 'icon' && isRequired)) &&\n            ' \\u200b'}\n          {/* necessityLabel is hidden to screen readers if the field is required because\n           * aria-required is set on the field in that case. That will already be announced,\n           * so no need to duplicate it here. If optional, we do want it to be announced here. */}\n          {necessityIndicator === 'label' && (\n            <span\n              aria-hidden={\n                !includeNecessityIndicatorInAccessibilityName\n                  ? isRequired\n                  : undefined\n              }\n            >\n              {necessityLabel}\n            </span>\n          )}\n          {necessityIndicator === 'icon' && isRequired && icon}\n        </>\n      )}\n    </LabelElement>\n  );\n}\n\nlet _Label = forwardRef(Label);\n\n_Label.displayName = 'Label';\n\nexport { _Label as Label };\n"],"mappings":";;;;;;;;;;;AAmBA,MAAM,gBACJ,oBAAC;CACC,OAAM;CACN,SAAQ;CACR,GAAE;CACF,GAAE;CACF,SAAQ;CACR,OAAO;EAEL,kBAAkB;EAClB,OAAO;EACP,QAAQ;EACR,WAAW;EACZ;WAED,oBAAC,sBACC,oBAAC,iBACC,oBAAC;EACC,MAAK;EACL,QAAO;GACP,GACA,GACG;EACL;AAGR,MAAM,gBAAgB;CACpB,cAAc;CACd,cAAc;CACf;AAED,MAAa,sBAA8B;CACzC,QAAQ;CACR,OAAO;EACL,IAAI;EACJ,SAAS;EACV;CACF;AAED,MAAa,eAAuB;CAClC,SAAS;CACT,QAAQ;EACN,IAAI;EACJ,cAAc;EACf;CACD,OAAO;EACL,IAAI;EACJ,SAAS;EACV;CACD,OAAO;EACL,IAAI;EACJ,MAAM;EACN,OAAO;EACR;CACF;AAED,MAAM,eAAe,MAAM;CACzB,IAAI;CACJ,IAAI;CACJ,QAAQ;CACT,CAAC;AAaF,SAAS,MAAM,OAAuB,KAAK;AACzC,SAAQ,iBAAiC,MAAM;CAE/C,IAAI,EACF,IACA,IACA,UACA,gBAAgB,OAChB,YACA,qBAAqB,cAAc,OAAO,SAAS,MACnD,+CAA+C,OAC/C,SACA,YACA,iBACA,OAAO,UACP,KAAK,UACL,GAAG,eACD;CAEJ,IAAI,SAAS,UAAU,IAAI;CAE3B,MAAM,SAAS,cAAc,YAAY,iBAAiB;CAE1D,IAAI,iBAAiB,YAAY,cAAc;CAC/C,IAAI,iBAAiB,aACjB,cAAc,aAAa,GAC3B,cAAc,aAAa;CAC/B,IAAI,OACF,oBAAC;EACC,cACE,+CACI,cAAc,aAAa,GAC3B;YAGL;GACI;AAGT,QACE,oBAAC;EACC,GAAI,gBAAgB,WAAW;EAC/B,KAAK;EACG;EACR,SAAS,YAAY;EACrB,aAAW;EACX,MAAM;GACJ,MAAM,kBAAkB;GACxB,UAAU;GACV,SAAS,oBAAoB;GAC7B,OAAO,oBAAoB;GAC5B;YAEA,OAAO,aAAa,WACnB,WAEA;GACG;IACC,uBAAuB,WACtB,uBAAuB,UAAU,eAClC;GAID,uBAAuB,WACtB,oBAAC;IACC,eACE,CAAC,+CACG,aACA;cAGL;KACI;GAER,uBAAuB,UAAU,cAAc;MAC/C;GAEQ;;AAInB,IAAI,SAAS,WAAW,MAAM;AAE9B,OAAO,cAAc"}

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

@@ -0,0 +1,19 @@
+
+import { FieldTypes, Fields } from "./Form/types.js";
+import { CubeFormInstance, useForm } from "./Form/use-form.js";
+import { CubeFormProps, FormContext, useFormProps } from "./Form/Form.js";
+import { CubeSubmitButtonProps, _SubmitButton } from "./Form/SubmitButton/SubmitButton.js";
+import { CubeResetButtonProps, _ResetButton } from "./Form/ResetButton/ResetButton.js";
+import { CubeAlertProps } from "../content/Alert/types.js";
+import { Field } from "./Form/Field.js";
+import { _SubmitError } from "./Form/SubmitError.js";
+import { FieldReturnValue, UseFieldProps } from "./Form/use-field/types.js";
+import { UseFieldParams, useField } from "./Form/use-field/use-field.js";
+import { UseFieldPropsParams, useFieldProps } from "./Form/use-field/use-field-props.js";
+import { Form } from "./Form/index.js";
+import { wrapWithField } from "./wrapper.js";
+import { CubeLabelProps, INLINE_LABEL_STYLES, LABEL_STYLES, _Label } from "./Label.js";
+import { CubeFieldWrapperProps } from "./FieldWrapper/types.js";
+import { FieldWrapper } from "./FieldWrapper/FieldWrapper.js";
+import { extractFieldWrapperProps } from "./FieldWrapper/extract-field-wrapper-props.js";
+import "./FieldWrapper/index.js";

package/dist/components/form/wrapper.d.ts

@@ -0,0 +1,15 @@
+
+import { BaseProps } from "../../tasty/types.js";
+import "../../tasty/index.js";
+import { FieldBaseProps, FormBaseProps } from "../../shared/form.js";
+import "../../shared/index.js";
+import { ReactElement, RefObject } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { DOMRef, FocusableRef } from "@react-types/shared";
+
+//#region src/components/form/wrapper.d.ts
+interface WrapWithFieldProps extends FieldBaseProps, BaseProps, FormBaseProps {}
+declare function wrapWithField<T extends WrapWithFieldProps>(component: ReactElement, ref: RefObject<unknown> | FocusableRef<HTMLElement> | DOMRef<HTMLElement>, props: T): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { wrapWithField };
+//# sourceMappingURL=wrapper.d.ts.map

package/dist/components/form/wrapper.js

@@ -0,0 +1,38 @@
+/** @license MIT | @cube-dev/ui-kit v0.116.0 | Cube Dev Team */
+import { mergeProps } from "../../utils/react/mergeProps.js";
+import { FieldWrapper } from "./FieldWrapper/FieldWrapper.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/form/wrapper.tsx
+function wrapWithField(component, ref, props) {
+	let { forceField, label, extra, labelPosition = "top", labelStyles, isRequired, isDisabled, necessityIndicator, message, messageStyles, description, errorMessage, validationState, labelProps, fieldProps, fieldStyles, requiredMark = true, tooltip, isHidden, labelSuffix } = props;
+	if (!label && !forceField) return component;
+	const mergedFieldProps = fieldStyles ? mergeProps(fieldProps, { styles: fieldStyles }) : fieldProps;
+	const mergedLabelProps = labelStyles ? mergeProps(labelProps, { styles: labelStyles }) : labelProps;
+	const { id: _id, ...fieldPropsWithoutId } = mergedFieldProps || {};
+	return /* @__PURE__ */ jsx(FieldWrapper, {
+		label,
+		extra,
+		labelPosition,
+		isRequired,
+		isDisabled,
+		necessityIndicator,
+		labelProps: mergedLabelProps,
+		fieldProps: fieldPropsWithoutId,
+		message,
+		messageStyles,
+		description,
+		errorMessage,
+		validationState,
+		requiredMark,
+		tooltip,
+		isHidden,
+		labelSuffix,
+		Component: component,
+		ref
+	});
+}
+
+//#endregion
+export { wrapWithField };
+//# sourceMappingURL=wrapper.js.map

package/dist/components/form/wrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wrapper.js","names":[],"sources":["../../../src/components/form/wrapper.tsx"],"sourcesContent":["import { DOMRef, FocusableRef } from '@react-types/shared';\nimport { ReactElement, RefObject } from 'react';\n\nimport { FieldBaseProps, FormBaseProps } from '../../shared/index';\nimport { BaseProps } from '../../tasty/index';\nimport { mergeProps } from '../../utils/react/index';\n\nimport { FieldWrapper } from './FieldWrapper/index';\n\ninterface WrapWithFieldProps extends FieldBaseProps, BaseProps, FormBaseProps {}\n\nexport function wrapWithField<T extends WrapWithFieldProps>(\n  component: ReactElement,\n  ref: RefObject<unknown> | FocusableRef<HTMLElement> | DOMRef<HTMLElement>,\n  props: T,\n) {\n  let {\n    forceField,\n    label,\n    extra,\n    labelPosition = 'top',\n    labelStyles,\n    isRequired,\n    isDisabled,\n    necessityIndicator,\n    message,\n    messageStyles,\n    description,\n    errorMessage,\n    validationState,\n    labelProps,\n    fieldProps,\n    fieldStyles,\n    requiredMark = true,\n    tooltip,\n    isHidden,\n    labelSuffix,\n  } = props;\n\n  if (!label && !forceField) {\n    return component;\n  }\n\n  // Merge fieldStyles as shorthand for fieldProps.styles (fieldStyles takes priority)\n  const mergedFieldProps = fieldStyles\n    ? mergeProps(fieldProps, { styles: fieldStyles })\n    : fieldProps;\n\n  // Merge labelStyles as shorthand for labelProps.styles (labelStyles takes priority)\n  const mergedLabelProps = labelStyles\n    ? mergeProps(labelProps, { styles: labelStyles })\n    : labelProps;\n\n  // Remove id from fieldProps to avoid duplication (id should be on the input element, not the field wrapper)\n  const { id: _id, ...fieldPropsWithoutId } = (mergedFieldProps as any) || {};\n\n  return (\n    <FieldWrapper\n      {...{\n        label,\n        extra,\n        labelPosition,\n        isRequired,\n        isDisabled,\n        necessityIndicator,\n        labelProps: mergedLabelProps,\n        fieldProps: fieldPropsWithoutId,\n        message,\n        messageStyles,\n        description,\n        errorMessage,\n        validationState,\n        requiredMark,\n        tooltip,\n        isHidden,\n        labelSuffix,\n        Component: component,\n        ref,\n      }}\n    />\n  );\n}\n"],"mappings":";;;;;;AAWA,SAAgB,cACd,WACA,KACA,OACA;CACA,IAAI,EACF,YACA,OACA,OACA,gBAAgB,OAChB,aACA,YACA,YACA,oBACA,SACA,eACA,aACA,cACA,iBACA,YACA,YACA,aACA,eAAe,MACf,SACA,UACA,gBACE;AAEJ,KAAI,CAAC,SAAS,CAAC,WACb,QAAO;CAIT,MAAM,mBAAmB,cACrB,WAAW,YAAY,EAAE,QAAQ,aAAa,CAAC,GAC/C;CAGJ,MAAM,mBAAmB,cACrB,WAAW,YAAY,EAAE,QAAQ,aAAa,CAAC,GAC/C;CAGJ,MAAM,EAAE,IAAI,KAAK,GAAG,wBAAyB,oBAA4B,EAAE;AAE3E,QACE,oBAAC;EAEG;EACA;EACA;EACA;EACA;EACA;EACA,YAAY;EACZ,YAAY;EACZ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,WAAW;EACX;GAEF"}

package/dist/components/helpers/DisplayTransition/DisplayTransition.d.ts

@@ -0,0 +1,36 @@
+
+import { ReactNode, RefCallback } from "react";
+
+//#region src/components/helpers/DisplayTransition/DisplayTransition.d.ts
+type ReportedPhase = 'enter' | 'entered' | 'exit' | 'unmounted';
+type DisplayTransitionProps = {
+  /** Desired visibility (driver). */isShown: boolean; /** Times enter->entered and exit->unmounted. 0 => immediate. If undefined, uses native transition events. */
+  duration?: number; /** Fires after enter settles or after exit completes (unmount). */
+  onRest?: (transition: 'enter' | 'exit') => void; /** Fires when phase changes. */
+  onPhaseChange?: (phase: ReportedPhase) => void; /** Fires when isShown (derived from phase) changes. */
+  onToggle?: (isShown: boolean) => void; /** Keep calling children during "unmounted" (you decide what to render). */
+  exposeUnmounted?: boolean; /** If false and initially shown, start at "entered" (no first-mount animation/SSR pop). */
+  animateOnMount?: boolean; /** Respect prefers-reduced-motion by collapsing duration to 0. */
+  respectReducedMotion?: boolean; /** Preserve children content during exit transition. When true, uses stored children from when content was visible. @default true */
+  preserveContent?: boolean; /** Render-prop gets { phase, isShown, ref }. Bind ref to the transitioned element for native event detection. */
+  children: (props: {
+    phase: ReportedPhase;
+    isShown: boolean;
+    ref: RefCallback<HTMLElement>;
+  }) => ReactNode;
+};
+declare function DisplayTransition({
+  isShown: targetShown,
+  duration,
+  onRest,
+  onPhaseChange,
+  onToggle,
+  exposeUnmounted,
+  animateOnMount,
+  respectReducedMotion,
+  preserveContent,
+  children
+}: DisplayTransitionProps): ReactNode;
+//#endregion
+export { DisplayTransition, DisplayTransitionProps };
+//# sourceMappingURL=DisplayTransition.d.ts.map

package/dist/components/helpers/DisplayTransition/DisplayTransition.js

@@ -0,0 +1,218 @@
+/** @license MIT | @cube-dev/ui-kit v0.116.0 | Cube Dev Team */
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+
+//#region src/components/helpers/DisplayTransition/DisplayTransition.tsx
+const AUTO_FALLBACK_DURATION = 500;
+function useEvent(fn) {
+	const ref = useRef(fn);
+	useLayoutEffect(() => {
+		ref.current = fn;
+	}, [fn]);
+	return useCallback((...args) => {
+		return ref.current?.(...args);
+	}, []);
+}
+function DisplayTransition({ isShown: targetShown, duration, onRest, onPhaseChange, onToggle, exposeUnmounted = false, animateOnMount = true, respectReducedMotion = true, preserveContent = true, children }) {
+	const dur = respectReducedMotion && typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches ? 0 : duration;
+	const storedChildrenRef = useRef(children);
+	const elementRef = useRef(null);
+	const transitionStartedRef = useRef(false);
+	const eventListenersRef = useRef(null);
+	const [phase, setPhase] = useState(targetShown ? animateOnMount ? "enter" : "entered" : "unmounted");
+	const phaseRef = useRef(phase);
+	phaseRef.current = phase;
+	const onRestEvent = useEvent(onRest);
+	const onPhaseChangeEvent = useEvent(onPhaseChange);
+	const onToggleEvent = useEvent(onToggle);
+	const flowRef = useRef(0);
+	const rafRef = useRef(null);
+	const timerRef = useRef(null);
+	const cancelRAF = () => {
+		if (rafRef.current != null) {
+			cancelAnimationFrame(rafRef.current);
+			rafRef.current = null;
+		}
+	};
+	const clearTimer = () => {
+		if (timerRef.current != null) {
+			clearTimeout(timerRef.current);
+			timerRef.current = null;
+		}
+	};
+	const nextPaint = (cb) => {
+		cancelRAF();
+		const flow = flowRef.current;
+		rafRef.current = requestAnimationFrame(() => {
+			if (flowRef.current !== flow) return;
+			rafRef.current = requestAnimationFrame(() => {
+				if (flowRef.current !== flow) return;
+				rafRef.current = null;
+				cb();
+			});
+		});
+	};
+	const cleanupEventListeners = () => {
+		const element = elementRef.current;
+		const listeners = eventListenersRef.current;
+		if (element && listeners) {
+			element.removeEventListener("transitionstart", listeners.onTransitionStart);
+			element.removeEventListener("transitionend", listeners.onTransitionEnd);
+			element.removeEventListener("transitioncancel", listeners.onTransitionCancel);
+			eventListenersRef.current = null;
+		}
+	};
+	const afterDuration = (cb) => {
+		const flow = flowRef.current;
+		if (dur === void 0) {
+			const element = elementRef.current;
+			cleanupEventListeners();
+			transitionStartedRef.current = false;
+			let completed = false;
+			const complete = () => {
+				if (completed || flowRef.current !== flow) return;
+				completed = true;
+				clearTimer();
+				cleanupEventListeners();
+				cb();
+			};
+			if (!element) {
+				clearTimer();
+				timerRef.current = setTimeout(() => {
+					if (flowRef.current !== flow) return;
+					timerRef.current = null;
+					complete();
+				}, AUTO_FALLBACK_DURATION);
+				return;
+			}
+			const onTransitionStart = (e) => {
+				if (e.target !== element) return;
+				if (flowRef.current !== flow) return;
+				transitionStartedRef.current = true;
+				clearTimer();
+			};
+			const onTransitionEnd = (e) => {
+				if (e.target !== element) return;
+				if (flowRef.current !== flow) return;
+				complete();
+			};
+			const onTransitionCancel = (e) => {
+				if (e.target !== element) return;
+				if (flowRef.current !== flow) return;
+				complete();
+			};
+			eventListenersRef.current = {
+				onTransitionStart,
+				onTransitionEnd,
+				onTransitionCancel
+			};
+			element.addEventListener("transitionstart", onTransitionStart);
+			element.addEventListener("transitionend", onTransitionEnd);
+			element.addEventListener("transitioncancel", onTransitionCancel);
+			timerRef.current = setTimeout(() => {
+				if (flowRef.current !== flow) return;
+				if (!transitionStartedRef.current) complete();
+			}, 150);
+			return;
+		}
+		if (dur <= 0) {
+			cb();
+			return;
+		}
+		clearTimer();
+		timerRef.current = setTimeout(() => {
+			if (flowRef.current !== flow) return;
+			timerRef.current = null;
+			cb();
+		}, dur);
+	};
+	const ensureEnterFlow = () => {
+		if (phaseRef.current !== "enter") return;
+		if (!elementRef.current) return;
+		nextPaint(() => {
+			if (phaseRef.current !== "enter") return;
+			setPhase("entered");
+			afterDuration(() => onRestEvent?.("enter"));
+		});
+	};
+	const ensureExitFlow = () => {
+		afterDuration(() => {
+			setPhase("unmounted");
+			onRestEvent?.("exit");
+		});
+	};
+	useEffect(() => {
+		++flowRef.current;
+		const current = phaseRef.current;
+		if (targetShown) if (current === "unmounted" || current === "exit") {
+			setPhase("enter");
+			ensureEnterFlow();
+		} else if (current === "enter") ensureEnterFlow();
+		else if (current === "exit-pending") {
+			cancelRAF();
+			clearTimer();
+			setPhase("entered");
+		} else {
+			cancelRAF();
+			clearTimer();
+		}
+		else if (current === "unmounted") {
+			cancelRAF();
+			clearTimer();
+		} else if (current !== "exit" && current !== "exit-pending") setPhase("exit-pending");
+		else if (current === "exit") ensureExitFlow();
+		return () => {
+			cancelRAF();
+			clearTimer();
+			cleanupEventListeners();
+		};
+	}, [
+		targetShown,
+		dur,
+		onRestEvent
+	]);
+	useLayoutEffect(() => {
+		if (phaseRef.current === "enter") ensureEnterFlow();
+		else if (phaseRef.current === "exit-pending") nextPaint(() => {
+			if (phaseRef.current === "exit-pending") {
+				setPhase("exit");
+				ensureExitFlow();
+			}
+		});
+		return cancelRAF;
+	}, [phase]);
+	const reportedPhase = phase === "exit-pending" ? "entered" : phase;
+	const prevReportedPhaseRef = useRef(reportedPhase);
+	useLayoutEffect(() => {
+		if (prevReportedPhaseRef.current !== reportedPhase) {
+			prevReportedPhaseRef.current = reportedPhase;
+			onPhaseChangeEvent?.(reportedPhase);
+		}
+	}, [reportedPhase, onPhaseChangeEvent]);
+	const isShownNow = phase === "entered" || phase === "exit-pending";
+	const prevIsShownRef = useRef(isShownNow);
+	useLayoutEffect(() => {
+		if (prevIsShownRef.current !== isShownNow) {
+			prevIsShownRef.current = isShownNow;
+			onToggleEvent?.(isShownNow);
+		}
+	}, [isShownNow, onToggleEvent]);
+	const refCallback = useCallback((node) => {
+		if (node) elementRef.current = node;
+		else {
+			cleanupEventListeners();
+			elementRef.current = null;
+		}
+	}, []);
+	if ((phase === "enter" || phase === "entered") && targetShown) storedChildrenRef.current = children;
+	const effectiveChildren = preserveContent ? storedChildrenRef.current : children;
+	if (phase === "unmounted" && !exposeUnmounted) return null;
+	return effectiveChildren({
+		phase: reportedPhase === "enter" && duration !== void 0 && !duration ? "entered" : reportedPhase,
+		isShown: isShownNow,
+		ref: refCallback
+	});
+}
+
+//#endregion
+export { DisplayTransition };
+//# sourceMappingURL=DisplayTransition.js.map