ods-ant 0.2.0 → 0.4.0

package/dist-lib/forms/Input.js

@@ -0,0 +1,358 @@
+import { dsSemanticTokens as e } from "../theme.js";
+import { FieldShell as t } from "./FieldShell.js";
+import { t as n } from "../fieldProps-EeYy2kXb.js";
+import { Input as r } from "antd";
+import { useEffect as i, useId as a } from "react";
+import { jsx as o } from "react/jsx-runtime";
+//#region src/ds/forms/Input.tsx
+var s = "ds-input-styles", c = "ds-input", l = (e) => {
+	let t = `${c} ${e.className ?? ""}`.trim();
+	return {
+		...e,
+		className: t
+	};
+}, u = ({ className: l = "", fieldLabel: u, fieldRequired: d, fieldDescription: f, fieldError: p, fieldActions: m, containerStyle: h, clear: g, clearable: _ = !1, clearLabel: v, clearVisibility: y = "always", onClear: b, onValueChange: x, id: S, ...C }) => {
+	let w = a();
+	i(() => {
+		if (typeof document < "u") {
+			let t = document.getElementById(s);
+			t || (t = document.createElement("style"), t.id = s, document.head.appendChild(t));
+			let { input: n } = e;
+			t.textContent = `
+        .ds-input.ant-input,
+        .ds-input.ant-input-affix-wrapper,
+        .ds-input.ant-input-filled,
+        .ds-input.ant-input-affix-wrapper.ant-input-affix-wrapper-filled,
+        .ds-input.ant-input-borderless,
+        .ds-input.ant-input-affix-wrapper.ant-input-affix-wrapper-borderless,
+        .ds-input.ant-input-underlined,
+        .ds-input.ant-input-affix-wrapper.ant-input-affix-wrapper-underlined,
+        .ds-input.ant-input-group-wrapper,
+        .ds-input.ant-input-search,
+        .ds-input.ant-space-compact.ant-input-search,
+        .ds-input.ant-input-outlined,
+        .ds-input.ant-input-affix-wrapper.ant-input-outlined {
+          border-color: ${n.border.default} !important;
+          border-width: ${n.border.widthDefault} !important;
+          border-style: solid !important;
+          border-radius: ${n.border.radius} !important;
+          background-color: ${n.background.default} !important;
+          color: ${n.text.default} !important;
+          transition: none !important;
+          box-sizing: border-box !important;
+        }
+
+        .ds-input.ant-input-group-wrapper .ant-input-group-addon,
+        .ds-input.ant-input-search .ant-input-search-button,
+        .ds-input.ant-input-search .ant-input-search-btn {
+          border-radius: ${n.border.radius} !important;
+        }
+
+        .ds-input.ant-input-search .ant-input-search-btn,
+        .ds-input.ant-input-search .ant-input-search-button {
+          border-top-left-radius: 0 !important;
+          border-bottom-left-radius: 0 !important;
+          border-top-right-radius: ${n.border.radius} !important;
+          border-bottom-right-radius: ${n.border.radius} !important;
+        }
+
+        .ds-input.ant-input-group-wrapper .ant-input-group-addon:first-child {
+          border-top-right-radius: 0 !important;
+          border-bottom-right-radius: 0 !important;
+        }
+
+        .ds-input.ant-input-group-wrapper .ant-input-group-addon:last-child {
+          border-top-left-radius: 0 !important;
+          border-bottom-left-radius: 0 !important;
+        }
+
+        .ds-input.ant-input-group-wrapper .ant-input-group > .ant-input {
+          border-radius: ${n.border.radius} !important;
+        }
+
+        .ds-input.ant-input-group-wrapper .ant-input-group > .ant-input,
+        .ds-input.ant-input-group-wrapper .ant-input-group-addon,
+        .ds-input.ant-input-search .ant-input,
+        .ds-input.ant-input-search .ant-input-search-btn,
+        .ds-input.ant-input-search .ant-input-search-button {
+          border-color: ${n.border.default} !important;
+          outline: none !important;
+          box-shadow: none !important;
+          transition: none !important;
+        }
+
+        .ds-input.ant-input-group-wrapper .ant-input-group > .ant-input,
+        .ds-input.ant-input-search .ant-input {
+          border-color: transparent !important;
+        }
+
+        .ds-input.ant-input-group-wrapper:focus-within {
+          border-color: ${n.border.focus} !important;
+          border-width: ${n.border.widthFocus} !important;
+          border-style: solid !important;
+          box-shadow: none !important;
+          outline: none !important;
+        }
+
+        .ds-input.ant-space-compact.ant-input-search:focus-within {
+          border-color: ${n.border.focus} !important;
+          border-width: ${n.border.widthFocus} !important;
+          border-style: solid !important;
+          box-shadow: none !important;
+          outline: none !important;
+        }
+
+        .ds-input.ant-input-group-wrapper:hover .ant-input-group-addon,
+        .ds-input.ant-space-compact.ant-input-search:hover .ant-input,
+        .ds-input.ant-input-search:hover .ant-input-search-btn,
+        .ds-input.ant-space-compact.ant-input-search:hover .ant-input-search-btn,
+        .ds-input.ant-input-search:hover .ant-input-search-button {
+          border-color: ${n.border.hover} !important;
+        }
+
+        .ds-input.ant-input-group-wrapper:hover .ant-input-group > .ant-input,
+        .ds-input.ant-input-search:hover .ant-input,
+        .ds-input.ant-space-compact.ant-input-search:hover .ant-input {
+          border-color: transparent !important;
+        }
+
+        .ds-input.ant-input-group-wrapper:focus-within .ant-input-group-addon,
+        .ds-input.ant-space-compact.ant-input-search:focus-within .ant-input,
+        .ds-input.ant-input-search:focus-within .ant-input-search-btn,
+        .ds-input.ant-space-compact.ant-input-search:focus-within .ant-input-search-btn,
+        .ds-input.ant-input-search:focus-within .ant-input-search-button {
+          border-color: ${n.border.focus} !important;
+          box-shadow: none !important;
+          outline: none !important;
+        }
+
+        .ds-input.ant-input-group-wrapper:focus-within .ant-input-group > .ant-input,
+        .ds-input.ant-input-search:focus-within .ant-input,
+        .ds-input.ant-space-compact.ant-input-search:focus-within .ant-input {
+          border-color: transparent !important;
+        }
+
+        .ds-input.ant-otp .ant-otp-input {
+          border: ${n.border.widthDefault} solid ${n.border.default} !important;
+          border-radius: ${n.border.radius} !important;
+          box-shadow: none !important;
+          outline: none !important;
+          transition: none !important;
+          background-color: ${n.background.default} !important;
+          color: ${n.text.default} !important;
+        }
+
+        .ds-input.ant-otp .ant-otp-input:hover {
+          border-color: ${n.border.hover} !important;
+        }
+
+        .ds-input.ant-otp .ant-otp-input:focus,
+        .ds-input.ant-otp .ant-otp-input:focus-visible {
+          border-color: ${n.border.focus} !important;
+          box-shadow: none !important;
+          outline: none !important;
+          color: ${n.text.focus} !important;
+        }
+
+        .ds-input.ant-input::placeholder,
+        .ds-input .ant-input::placeholder {
+          color: ${n.text.placeholder} !important;
+          opacity: 1;
+        }
+
+        .ds-input.ant-input:hover,
+        .ds-input.ant-input-affix-wrapper:hover,
+        .ds-input.ant-input-filled:hover,
+        .ds-input.ant-input-affix-wrapper.ant-input-affix-wrapper-filled:hover,
+        .ds-input.ant-input-outlined:hover,
+        .ds-input.ant-input-affix-wrapper.ant-input-outlined:hover {
+          border-color: ${n.border.hover} !important;
+        }
+
+        .ds-input.ant-input-filled,
+        .ds-input.ant-input-affix-wrapper.ant-input-affix-wrapper-filled {
+          background-color: ${n.background.readOnly} !important;
+        }
+
+        .ds-input.ant-input-affix-wrapper.ant-input-affix-wrapper-filled .ant-input {
+          background-color: transparent !important;
+        }
+
+        .ds-input.ant-input:focus,
+        .ds-input.ant-input-focused,
+        .ds-input.ant-input-affix-wrapper-focused,
+        .ds-input.ant-input-affix-wrapper:focus-within {
+          border-color: ${n.border.focus} !important;
+          border-width: ${n.border.widthFocus} !important;
+          border-style: solid !important;
+          box-shadow: none !important;
+          outline: none !important;
+          color: ${n.text.focus} !important;
+          font-weight: ${n.focusFontWeight} !important;
+        }
+
+        .ds-input.ant-input:focus-visible,
+        .ds-input.ant-input-affix-wrapper:focus-visible,
+        .ds-input.ant-input-affix-wrapper .ant-input:focus,
+        .ds-input.ant-input-affix-wrapper .ant-input:focus-visible {
+          outline: none !important;
+          box-shadow: none !important;
+        }
+
+        .ds-input.ant-input:focus::placeholder,
+        .ds-input.ant-input-focused::placeholder,
+        .ds-input.ant-input-affix-wrapper-focused .ant-input::placeholder,
+        .ds-input.ant-input-affix-wrapper:focus-within .ant-input::placeholder {
+          color: ${n.text.focus} !important;
+        }
+
+        .ds-input.ant-input-status-error,
+        .ds-input.ant-input-affix-wrapper-status-error {
+          border-color: ${n.border.error} !important;
+        }
+
+        .ds-input.ant-input-status-success,
+        .ds-input.ant-input-affix-wrapper-status-success {
+          border-color: ${n.border.success} !important;
+        }
+
+        .ds-input.ant-input-disabled,
+        .ds-input.ant-input-affix-wrapper-disabled,
+        .ds-input.ant-input[disabled],
+        .ds-input.ant-input-affix-wrapper[disabled],
+        .ds-input.ant-input-affix-wrapper-disabled .ant-input {
+          background-color: ${n.background.disabled} !important;
+          border-color: transparent !important;
+          color: ${n.text.disabled} !important;
+          -webkit-text-fill-color: ${n.text.disabled} !important;
+        }
+
+        .ds-input.ant-input[readonly],
+        .ds-input.ant-input-affix-wrapper:has(.ant-input[readonly]),
+        .ds-input.ant-input-affix-wrapper-readonly {
+          background-color: ${n.background.readOnly} !important;
+          border-color: ${n.border.default} !important;
+          color: ${n.text.readOnly} !important;
+        }
+
+        .ds-input.ant-input[readonly]::placeholder,
+        .ds-input.ant-input-affix-wrapper:has(.ant-input[readonly]) .ant-input::placeholder,
+        .ds-input.ant-input-affix-wrapper-readonly .ant-input::placeholder {
+          color: ${n.text.placeholder} !important;
+        }
+
+        .ds-input.ant-input-sm,
+        .ds-input.ant-input-affix-wrapper-sm {
+          height: ${n.height.small} !important;
+          min-height: ${n.height.small} !important;
+          padding: ${n.padding.small.y} ${n.padding.small.x} !important;
+        }
+
+        .ds-input.ant-input,
+        .ds-input.ant-input-affix-wrapper {
+          height: ${n.height.middle} !important;
+          min-height: ${n.height.middle} !important;
+          padding: ${n.padding.middle.y} ${n.padding.middle.x} !important;
+        }
+
+        .ds-input.ant-input-lg,
+        .ds-input.ant-input-affix-wrapper-lg {
+          height: ${n.height.large} !important;
+          min-height: ${n.height.large} !important;
+          padding: ${n.padding.large.y} ${n.padding.large.x} !important;
+        }
+
+        .ds-input.ant-input-affix-wrapper .ant-input {
+          border: none !important;
+          border-color: transparent !important;
+          outline: none !important;
+          box-shadow: none !important;
+          background: transparent !important;
+          padding: 0 !important;
+          height: auto !important;
+          min-height: 0 !important;
+        }
+
+        .ds-input.ant-input:focus,
+        .ds-input.ant-input:focus-visible,
+        .ds-input.ant-input:focus:hover,
+        .ds-input.ant-input-focused,
+        .ds-input.ant-input-focused:hover,
+        .ds-input.ant-input-affix-wrapper-focused,
+        .ds-input.ant-input-affix-wrapper-focused:hover,
+        .ds-input.ant-input-affix-wrapper:focus,
+        .ds-input.ant-input-affix-wrapper:focus-visible,
+        .ds-input.ant-input-affix-wrapper:focus-within,
+        .ds-input.ant-input-affix-wrapper:focus-within:hover,
+        .ds-input.ant-input-group-wrapper:focus-within,
+        .ds-input.ant-input-group-wrapper:focus-within:hover,
+        .ds-input.ant-input-search:focus-within,
+        .ds-input.ant-input-search:focus-within:hover,
+        .ds-input.ant-space-compact.ant-input-search:focus-within,
+        .ds-input.ant-space-compact.ant-input-search:focus-within:hover {
+          border-color: ${n.border.focus} !important;
+          border-width: ${n.border.widthFocus} !important;
+          border-style: solid !important;
+          box-shadow: none !important;
+          outline: none !important;
+        }
+
+        .ds-input.ant-input-affix-wrapper:focus-within .ant-input,
+        .ds-input.ant-input-affix-wrapper-focused .ant-input,
+        .ds-input.ant-input-group-wrapper:focus-within .ant-input-group > .ant-input,
+        .ds-input.ant-input-group-wrapper:focus-within .ant-input-group-addon,
+        .ds-input.ant-input-search:focus-within .ant-input,
+        .ds-input.ant-input-search:focus-within .ant-input-search-btn,
+        .ds-input.ant-input-search:focus-within .ant-input-search-button,
+        .ds-input.ant-space-compact.ant-input-search:focus-within .ant-input,
+        .ds-input.ant-space-compact.ant-input-search:focus-within .ant-input-search-btn,
+        .ds-input.ant-space-compact.ant-input-search:focus-within .ant-input-search-button {
+          border-color: transparent !important;
+          box-shadow: none !important;
+          outline: none !important;
+        }
+      `;
+		}
+	}, []);
+	let T = `${c} ${l}`.trim(), E = !!(u || d || f || p || m || _ || g || b), D = S ?? (E ? w : void 0), O = D ? `${D}-description` : void 0, k = D ? `${D}-error` : void 0, A = g?.onClear ?? b, j = n(f ? O : void 0, p ? k : void 0), M = /* @__PURE__ */ o(r, {
+		...C,
+		id: D,
+		className: T,
+		"aria-describedby": j,
+		"aria-invalid": p ? !0 : void 0,
+		onChange: (e) => {
+			C.onChange?.(e), x?.(e.target.value);
+		}
+	});
+	return E ? /* @__PURE__ */ o(t, {
+		label: u,
+		required: d,
+		htmlFor: D,
+		description: f,
+		descriptionId: O,
+		error: p,
+		errorId: k,
+		clear: g,
+		clearable: _,
+		clearLabel: v,
+		clearVisibility: y,
+		clearValue: C.value,
+		onClear: () => {
+			A?.(), x?.("");
+		},
+		extraActions: m,
+		style: h,
+		children: M
+	}) : M;
+};
+u.displayName = "Input";
+var d = (e) => /* @__PURE__ */ o(r.TextArea, { ...l(e) });
+d.displayName = "InputTextArea";
+var f = (e) => /* @__PURE__ */ o(r.Search, { ...l(e) });
+f.displayName = "InputSearch";
+var p = (e) => /* @__PURE__ */ o(r.OTP, { ...l(e) });
+p.displayName = "InputOTP";
+//#endregion
+export { u as Input, p as InputOTP, f as InputSearch, d as InputTextArea };
+
+//# sourceMappingURL=Input.js.map

package/dist-lib/forms/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","names":[],"sources":["../../src/ds/forms/Input.tsx"],"sourcesContent":["import { Input as AntInput } from 'antd';\nimport type { InputProps as AntInputProps } from 'antd';\nimport type { ComponentProps } from 'react';\nimport { useEffect, useId } from 'react';\nimport { dsSemanticTokens } from '../../theme/ontadaTheme';\nimport { FieldShell } from './FieldShell';\nimport type { DSFieldShellProps } from './fieldProps';\nimport { joinDescribedByIds } from './fieldProps';\n\nconst STYLE_ID = 'ds-input-styles';\nconst DS_INPUT_CLASS = 'ds-input';\n\ntype ClassNameProp = { className?: string };\n\nconst withDsInputClass = <T extends ClassNameProp>(props: T): T => {\n  const mergedClassName = `${DS_INPUT_CLASS} ${props.className ?? ''}`.trim();\n  return { ...props, className: mergedClassName };\n};\n\nexport type InputFieldProps = DSFieldShellProps & {\n  onValueChange?: (nextValue: string) => void;\n};\n\nexport type InputProps = AntInputProps & InputFieldProps;\nexport type InputTextAreaProps = ComponentProps<typeof AntInput.TextArea>;\nexport type InputSearchProps = ComponentProps<typeof AntInput.Search>;\nexport type InputOTPProps = ComponentProps<typeof AntInput.OTP>;\n\nexport const Input = ({\n  className = '',\n  fieldLabel,\n  fieldRequired,\n  fieldDescription,\n  fieldError,\n  fieldActions,\n  containerStyle,\n  clear,\n  clearable = false,\n  clearLabel,\n  clearVisibility = 'always',\n  onClear,\n  onValueChange,\n  id,\n  ...props\n}: InputProps) => {\n  const generatedId = useId();\n  useEffect(() => {\n    if (typeof document !== 'undefined') {\n      let style = document.getElementById(STYLE_ID) as HTMLStyleElement | null;\n      if (!style) {\n        style = document.createElement('style');\n        style.id = STYLE_ID;\n        document.head.appendChild(style);\n      }\n      const { input } = dsSemanticTokens;\n\n      style.textContent = `\n        .ds-input.ant-input,\n        .ds-input.ant-input-affix-wrapper,\n        .ds-input.ant-input-filled,\n        .ds-input.ant-input-affix-wrapper.ant-input-affix-wrapper-filled,\n        .ds-input.ant-input-borderless,\n        .ds-input.ant-input-affix-wrapper.ant-input-affix-wrapper-borderless,\n        .ds-input.ant-input-underlined,\n        .ds-input.ant-input-affix-wrapper.ant-input-affix-wrapper-underlined,\n        .ds-input.ant-input-group-wrapper,\n        .ds-input.ant-input-search,\n        .ds-input.ant-space-compact.ant-input-search,\n        .ds-input.ant-input-outlined,\n        .ds-input.ant-input-affix-wrapper.ant-input-outlined {\n          border-color: ${input.border.default} !important;\n          border-width: ${input.border.widthDefault} !important;\n          border-style: solid !important;\n          border-radius: ${input.border.radius} !important;\n          background-color: ${input.background.default} !important;\n          color: ${input.text.default} !important;\n          transition: none !important;\n          box-sizing: border-box !important;\n        }\n\n        .ds-input.ant-input-group-wrapper .ant-input-group-addon,\n        .ds-input.ant-input-search .ant-input-search-button,\n        .ds-input.ant-input-search .ant-input-search-btn {\n          border-radius: ${input.border.radius} !important;\n        }\n\n        .ds-input.ant-input-search .ant-input-search-btn,\n        .ds-input.ant-input-search .ant-input-search-button {\n          border-top-left-radius: 0 !important;\n          border-bottom-left-radius: 0 !important;\n          border-top-right-radius: ${input.border.radius} !important;\n          border-bottom-right-radius: ${input.border.radius} !important;\n        }\n\n        .ds-input.ant-input-group-wrapper .ant-input-group-addon:first-child {\n          border-top-right-radius: 0 !important;\n          border-bottom-right-radius: 0 !important;\n        }\n\n        .ds-input.ant-input-group-wrapper .ant-input-group-addon:last-child {\n          border-top-left-radius: 0 !important;\n          border-bottom-left-radius: 0 !important;\n        }\n\n        .ds-input.ant-input-group-wrapper .ant-input-group > .ant-input {\n          border-radius: ${input.border.radius} !important;\n        }\n\n        .ds-input.ant-input-group-wrapper .ant-input-group > .ant-input,\n        .ds-input.ant-input-group-wrapper .ant-input-group-addon,\n        .ds-input.ant-input-search .ant-input,\n        .ds-input.ant-input-search .ant-input-search-btn,\n        .ds-input.ant-input-search .ant-input-search-button {\n          border-color: ${input.border.default} !important;\n          outline: none !important;\n          box-shadow: none !important;\n          transition: none !important;\n        }\n\n        .ds-input.ant-input-group-wrapper .ant-input-group > .ant-input,\n        .ds-input.ant-input-search .ant-input {\n          border-color: transparent !important;\n        }\n\n        .ds-input.ant-input-group-wrapper:focus-within {\n          border-color: ${input.border.focus} !important;\n          border-width: ${input.border.widthFocus} !important;\n          border-style: solid !important;\n          box-shadow: none !important;\n          outline: none !important;\n        }\n\n        .ds-input.ant-space-compact.ant-input-search:focus-within {\n          border-color: ${input.border.focus} !important;\n          border-width: ${input.border.widthFocus} !important;\n          border-style: solid !important;\n          box-shadow: none !important;\n          outline: none !important;\n        }\n\n        .ds-input.ant-input-group-wrapper:hover .ant-input-group-addon,\n        .ds-input.ant-space-compact.ant-input-search:hover .ant-input,\n        .ds-input.ant-input-search:hover .ant-input-search-btn,\n        .ds-input.ant-space-compact.ant-input-search:hover .ant-input-search-btn,\n        .ds-input.ant-input-search:hover .ant-input-search-button {\n          border-color: ${input.border.hover} !important;\n        }\n\n        .ds-input.ant-input-group-wrapper:hover .ant-input-group > .ant-input,\n        .ds-input.ant-input-search:hover .ant-input,\n        .ds-input.ant-space-compact.ant-input-search:hover .ant-input {\n          border-color: transparent !important;\n        }\n\n        .ds-input.ant-input-group-wrapper:focus-within .ant-input-group-addon,\n        .ds-input.ant-space-compact.ant-input-search:focus-within .ant-input,\n        .ds-input.ant-input-search:focus-within .ant-input-search-btn,\n        .ds-input.ant-space-compact.ant-input-search:focus-within .ant-input-search-btn,\n        .ds-input.ant-input-search:focus-within .ant-input-search-button {\n          border-color: ${input.border.focus} !important;\n          box-shadow: none !important;\n          outline: none !important;\n        }\n\n        .ds-input.ant-input-group-wrapper:focus-within .ant-input-group > .ant-input,\n        .ds-input.ant-input-search:focus-within .ant-input,\n        .ds-input.ant-space-compact.ant-input-search:focus-within .ant-input {\n          border-color: transparent !important;\n        }\n\n        .ds-input.ant-otp .ant-otp-input {\n          border: ${input.border.widthDefault} solid ${input.border.default} !important;\n          border-radius: ${input.border.radius} !important;\n          box-shadow: none !important;\n          outline: none !important;\n          transition: none !important;\n          background-color: ${input.background.default} !important;\n          color: ${input.text.default} !important;\n        }\n\n        .ds-input.ant-otp .ant-otp-input:hover {\n          border-color: ${input.border.hover} !important;\n        }\n\n        .ds-input.ant-otp .ant-otp-input:focus,\n        .ds-input.ant-otp .ant-otp-input:focus-visible {\n          border-color: ${input.border.focus} !important;\n          box-shadow: none !important;\n          outline: none !important;\n          color: ${input.text.focus} !important;\n        }\n\n        .ds-input.ant-input::placeholder,\n        .ds-input .ant-input::placeholder {\n          color: ${input.text.placeholder} !important;\n          opacity: 1;\n        }\n\n        .ds-input.ant-input:hover,\n        .ds-input.ant-input-affix-wrapper:hover,\n        .ds-input.ant-input-filled:hover,\n        .ds-input.ant-input-affix-wrapper.ant-input-affix-wrapper-filled:hover,\n        .ds-input.ant-input-outlined:hover,\n        .ds-input.ant-input-affix-wrapper.ant-input-outlined:hover {\n          border-color: ${input.border.hover} !important;\n        }\n\n        .ds-input.ant-input-filled,\n        .ds-input.ant-input-affix-wrapper.ant-input-affix-wrapper-filled {\n          background-color: ${input.background.readOnly} !important;\n        }\n\n        .ds-input.ant-input-affix-wrapper.ant-input-affix-wrapper-filled .ant-input {\n          background-color: transparent !important;\n        }\n\n        .ds-input.ant-input:focus,\n        .ds-input.ant-input-focused,\n        .ds-input.ant-input-affix-wrapper-focused,\n        .ds-input.ant-input-affix-wrapper:focus-within {\n          border-color: ${input.border.focus} !important;\n          border-width: ${input.border.widthFocus} !important;\n          border-style: solid !important;\n          box-shadow: none !important;\n          outline: none !important;\n          color: ${input.text.focus} !important;\n          font-weight: ${input.focusFontWeight} !important;\n        }\n\n        .ds-input.ant-input:focus-visible,\n        .ds-input.ant-input-affix-wrapper:focus-visible,\n        .ds-input.ant-input-affix-wrapper .ant-input:focus,\n        .ds-input.ant-input-affix-wrapper .ant-input:focus-visible {\n          outline: none !important;\n          box-shadow: none !important;\n        }\n\n        .ds-input.ant-input:focus::placeholder,\n        .ds-input.ant-input-focused::placeholder,\n        .ds-input.ant-input-affix-wrapper-focused .ant-input::placeholder,\n        .ds-input.ant-input-affix-wrapper:focus-within .ant-input::placeholder {\n          color: ${input.text.focus} !important;\n        }\n\n        .ds-input.ant-input-status-error,\n        .ds-input.ant-input-affix-wrapper-status-error {\n          border-color: ${input.border.error} !important;\n        }\n\n        .ds-input.ant-input-status-success,\n        .ds-input.ant-input-affix-wrapper-status-success {\n          border-color: ${input.border.success} !important;\n        }\n\n        .ds-input.ant-input-disabled,\n        .ds-input.ant-input-affix-wrapper-disabled,\n        .ds-input.ant-input[disabled],\n        .ds-input.ant-input-affix-wrapper[disabled],\n        .ds-input.ant-input-affix-wrapper-disabled .ant-input {\n          background-color: ${input.background.disabled} !important;\n          border-color: transparent !important;\n          color: ${input.text.disabled} !important;\n          -webkit-text-fill-color: ${input.text.disabled} !important;\n        }\n\n        .ds-input.ant-input[readonly],\n        .ds-input.ant-input-affix-wrapper:has(.ant-input[readonly]),\n        .ds-input.ant-input-affix-wrapper-readonly {\n          background-color: ${input.background.readOnly} !important;\n          border-color: ${input.border.default} !important;\n          color: ${input.text.readOnly} !important;\n        }\n\n        .ds-input.ant-input[readonly]::placeholder,\n        .ds-input.ant-input-affix-wrapper:has(.ant-input[readonly]) .ant-input::placeholder,\n        .ds-input.ant-input-affix-wrapper-readonly .ant-input::placeholder {\n          color: ${input.text.placeholder} !important;\n        }\n\n        .ds-input.ant-input-sm,\n        .ds-input.ant-input-affix-wrapper-sm {\n          height: ${input.height.small} !important;\n          min-height: ${input.height.small} !important;\n          padding: ${input.padding.small.y} ${input.padding.small.x} !important;\n        }\n\n        .ds-input.ant-input,\n        .ds-input.ant-input-affix-wrapper {\n          height: ${input.height.middle} !important;\n          min-height: ${input.height.middle} !important;\n          padding: ${input.padding.middle.y} ${input.padding.middle.x} !important;\n        }\n\n        .ds-input.ant-input-lg,\n        .ds-input.ant-input-affix-wrapper-lg {\n          height: ${input.height.large} !important;\n          min-height: ${input.height.large} !important;\n          padding: ${input.padding.large.y} ${input.padding.large.x} !important;\n        }\n\n        .ds-input.ant-input-affix-wrapper .ant-input {\n          border: none !important;\n          border-color: transparent !important;\n          outline: none !important;\n          box-shadow: none !important;\n          background: transparent !important;\n          padding: 0 !important;\n          height: auto !important;\n          min-height: 0 !important;\n        }\n\n        .ds-input.ant-input:focus,\n        .ds-input.ant-input:focus-visible,\n        .ds-input.ant-input:focus:hover,\n        .ds-input.ant-input-focused,\n        .ds-input.ant-input-focused:hover,\n        .ds-input.ant-input-affix-wrapper-focused,\n        .ds-input.ant-input-affix-wrapper-focused:hover,\n        .ds-input.ant-input-affix-wrapper:focus,\n        .ds-input.ant-input-affix-wrapper:focus-visible,\n        .ds-input.ant-input-affix-wrapper:focus-within,\n        .ds-input.ant-input-affix-wrapper:focus-within:hover,\n        .ds-input.ant-input-group-wrapper:focus-within,\n        .ds-input.ant-input-group-wrapper:focus-within:hover,\n        .ds-input.ant-input-search:focus-within,\n        .ds-input.ant-input-search:focus-within:hover,\n        .ds-input.ant-space-compact.ant-input-search:focus-within,\n        .ds-input.ant-space-compact.ant-input-search:focus-within:hover {\n          border-color: ${input.border.focus} !important;\n          border-width: ${input.border.widthFocus} !important;\n          border-style: solid !important;\n          box-shadow: none !important;\n          outline: none !important;\n        }\n\n        .ds-input.ant-input-affix-wrapper:focus-within .ant-input,\n        .ds-input.ant-input-affix-wrapper-focused .ant-input,\n        .ds-input.ant-input-group-wrapper:focus-within .ant-input-group > .ant-input,\n        .ds-input.ant-input-group-wrapper:focus-within .ant-input-group-addon,\n        .ds-input.ant-input-search:focus-within .ant-input,\n        .ds-input.ant-input-search:focus-within .ant-input-search-btn,\n        .ds-input.ant-input-search:focus-within .ant-input-search-button,\n        .ds-input.ant-space-compact.ant-input-search:focus-within .ant-input,\n        .ds-input.ant-space-compact.ant-input-search:focus-within .ant-input-search-btn,\n        .ds-input.ant-space-compact.ant-input-search:focus-within .ant-input-search-button {\n          border-color: transparent !important;\n          box-shadow: none !important;\n          outline: none !important;\n        }\n      `;\n\n    }\n  }, []);\n\n  const mergedClassName = `${DS_INPUT_CLASS} ${className}`.trim();\n  const shouldWrapInFieldShell = Boolean(\n    fieldLabel ||\n      fieldRequired ||\n      fieldDescription ||\n      fieldError ||\n      fieldActions ||\n      clearable ||\n      clear ||\n      onClear,\n  );\n  const controlId = id ?? (shouldWrapInFieldShell ? generatedId : undefined);\n  const descriptionId = controlId ? `${controlId}-description` : undefined;\n  const errorId = controlId ? `${controlId}-error` : undefined;\n  const clearAction = clear?.onClear ?? onClear;\n  const describedBy = joinDescribedByIds(\n    fieldDescription ? descriptionId : undefined,\n    fieldError ? errorId : undefined,\n  );\n\n  const control = (\n    <AntInput\n      {...props}\n      id={controlId}\n      className={mergedClassName}\n      aria-describedby={describedBy}\n      aria-invalid={fieldError ? true : undefined}\n      onChange={(event) => {\n        props.onChange?.(event);\n        onValueChange?.(event.target.value);\n      }}\n    />\n  );\n\n  if (!shouldWrapInFieldShell) {\n    return control;\n  }\n\n  return (\n    <FieldShell\n      label={fieldLabel}\n      required={fieldRequired}\n      htmlFor={controlId}\n      description={fieldDescription}\n      descriptionId={descriptionId}\n      error={fieldError}\n      errorId={errorId}\n      clear={clear}\n      clearable={clearable}\n      clearLabel={clearLabel}\n      clearVisibility={clearVisibility}\n      clearValue={props.value}\n      onClear={() => {\n        clearAction?.();\n        onValueChange?.('');\n      }}\n      extraActions={fieldActions}\n      style={containerStyle}\n    >\n      {control}\n    </FieldShell>\n  );\n};\n\nInput.displayName = 'Input';\n\nexport const InputTextArea = (props: InputTextAreaProps) => {\n  return <AntInput.TextArea {...withDsInputClass(props)} />;\n};\n\nInputTextArea.displayName = 'InputTextArea';\n\nexport const InputSearch = (props: InputSearchProps) => {\n  return <AntInput.Search {...withDsInputClass(props)} />;\n};\n\nInputSearch.displayName = 'InputSearch';\n\nexport const InputOTP = (props: InputOTPProps) => {\n  return <AntInput.OTP {...withDsInputClass(props)} />;\n};\n\nInputOTP.displayName = 'InputOTP';"],"mappings":"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"}

package/dist-lib/forms/InputNumber.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`../InputNumber-X-VvOKNc.cjs`);exports.InputNumber=e.t;

package/dist-lib/forms/InputNumber.js

@@ -0,0 +1,2 @@
+import { t as e } from "../InputNumber-55VASjK4.js";
+export { e as InputNumber };

package/dist-lib/forms/Mentions.cjs

@@ -0,0 +1,40 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-Bmb41Sf3.cjs`);const e=require(`../theme.cjs`),t=require(`./FieldShell.cjs`),n=require(`../fieldProps-CuWfEbFx.cjs`);let r=require(`antd`),i=require(`react`),a=require(`react/jsx-runtime`);var o=`ds-clearable-mentions`,s=`ds-clearable-mentions-has-tags`,c=`ds-clearable-mentions-overlay`,l=`ds-clearable-mentions-tag`,u=`ds-clearable-mentions-style`,d=/(^|\s)(@[A-Za-z0-9._-]+)/g,f=/(^|\s)@[A-Za-z0-9._-]+/;function p(){if(typeof document>`u`||document.getElementById(u))return;let t=document.createElement(`style`);t.id=u,t.textContent=`
+    .${o} {
+      position: relative;
+      width: 100%;
+    }
+
+    .${o} .${c} {
+      position: absolute;
+      inset: 0;
+      z-index: 1;
+      pointer-events: none;
+      white-space: pre-wrap;
+      overflow: hidden;
+      padding: ${e.dsSemanticTokens.input.padding.middle.y} ${e.dsSemanticTokens.input.padding.middle.x};
+      color: ${e.dsSemanticTokens.input.text.focus};
+      font-family: var(--ant-font-family);
+      font-size: ${e.dsSemanticTokens.button.typography.small.fontSize};
+      font-weight: 400;
+      line-height: ${e.dsSemanticTokens.button.typography.small.lineHeight};
+    }
+
+    .${o}.${s} .ant-mentions > textarea {
+      color: transparent !important;
+      -webkit-text-fill-color: transparent;
+      caret-color: ${e.dsSemanticTokens.input.text.focus};
+    }
+
+    .${o} .${l} {
+      display: inline-flex;
+      align-items: center;
+      background: ${e.dsSemanticTokens.tag.status.new.light.bg};
+      color: ${e.dsSemanticTokens.tag.status.new.light.text};
+      border-radius: ${e.dsSemanticTokens.tag.size.sm.radius}px;
+      line-height: ${e.dsSemanticTokens.button.typography.small.lineHeight};
+      max-height: calc(${e.dsSemanticTokens.button.typography.small.lineHeight} + 2px);
+      padding: 0 4px;
+      vertical-align: top;
+    }
+  `,document.head.appendChild(t)}function m(e){let t=[],n=0;return e.replace(d,(r,i,a,o)=>{let s=String(i??``),c=String(a??``).trim(),l=o+s.length;return l>n&&t.push({text:e.slice(n,l),isTag:!1}),c&&t.push({text:c,isTag:!0}),n=l+c.length,r}),n<e.length&&t.push({text:e.slice(n),isTag:!1}),t.length>0?t:[{text:e,isTag:!1}]}var h=({fieldLabel:e,fieldRequired:u,fieldDescription:d,fieldError:h,fieldActions:g,containerStyle:_,clear:v,clearable:y=!1,clearLabel:b,clearVisibility:x=`always`,onClear:S,onValueChange:C,value:w,className:T,...E})=>{p();let D=(0,i.useId)(),O=!!(e||u||d||h||g||y||v||S),k=E.id??(O?D:void 0),A=k?`${k}-description`:void 0,j=k?`${k}-error`:void 0,M=typeof w==`string`?w:``,N=f.test(M),P=N?m(M):[],F=[T,o,N?s:void 0].filter(Boolean).join(` `),I=v?.onClear??S,L=n.t(d?A:void 0,h?j:void 0),R=(0,a.jsxs)(`div`,{className:F,children:[N?(0,a.jsx)(`div`,{"aria-hidden":`true`,className:c,children:P.map((e,t)=>e.isTag?(0,a.jsx)(`span`,{className:l,children:e.text},`${t}-${e.text}`):(0,a.jsx)(`span`,{children:e.text},`${t}-${e.text}`))}):null,(0,a.jsx)(r.Mentions,{...E,id:k,className:T,value:w,"aria-describedby":L,"aria-invalid":h?!0:void 0,onChange:e=>{E.onChange?.(e),C?.(e)},style:{width:`100%`,...E.style}})]});return O?(0,a.jsx)(t.FieldShell,{label:e,required:u,htmlFor:k,description:d,descriptionId:A,error:h,errorId:j,clear:v,clearable:y,clearLabel:b,clearVisibility:x,clearValue:w,onClear:()=>{I?.(),C?.(``),E.onChange?.(``)},extraActions:g,style:_,children:R}):R};exports.Mentions=h;
+//# sourceMappingURL=Mentions.cjs.map

package/dist-lib/forms/Mentions.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Mentions.cjs","names":[],"sources":["../../src/ds/forms/Mentions.tsx"],"sourcesContent":["import { Mentions as AntMentions } from 'antd';\nimport { useId } from 'react';\nimport type { ReactNode } from 'react';\nimport { FieldShell } from './FieldShell';\nimport type { DSFieldShellProps } from './fieldProps';\nimport { joinDescribedByIds } from './fieldProps';\nimport { dsSemanticTokens } from '../../theme/ontadaTheme';\n\nconst DS_MENTIONS_CLASS = 'ds-clearable-mentions';\nconst DS_MENTIONS_HAS_TAGS_CLASS = 'ds-clearable-mentions-has-tags';\nconst DS_MENTIONS_OVERLAY_CLASS = 'ds-clearable-mentions-overlay';\nconst DS_MENTIONS_TAG_CLASS = 'ds-clearable-mentions-tag';\nconst DS_MENTIONS_STYLE_ID = 'ds-clearable-mentions-style';\n\nconst MENTION_TAG_PATTERN = /(^|\\s)(@[A-Za-z0-9._-]+)/g;\nconst MENTION_TAG_CHECK_PATTERN = /(^|\\s)@[A-Za-z0-9._-]+/;\n\nfunction ensureMentionsStyles() {\n  if (typeof document === 'undefined') {\n    return;\n  }\n\n  if (document.getElementById(DS_MENTIONS_STYLE_ID)) {\n    return;\n  }\n\n  const style = document.createElement('style');\n  style.id = DS_MENTIONS_STYLE_ID;\n  style.textContent = `\n    .${DS_MENTIONS_CLASS} {\n      position: relative;\n      width: 100%;\n    }\n\n    .${DS_MENTIONS_CLASS} .${DS_MENTIONS_OVERLAY_CLASS} {\n      position: absolute;\n      inset: 0;\n      z-index: 1;\n      pointer-events: none;\n      white-space: pre-wrap;\n      overflow: hidden;\n      padding: ${dsSemanticTokens.input.padding.middle.y} ${dsSemanticTokens.input.padding.middle.x};\n      color: ${dsSemanticTokens.input.text.focus};\n      font-family: var(--ant-font-family);\n      font-size: ${dsSemanticTokens.button.typography.small.fontSize};\n      font-weight: 400;\n      line-height: ${dsSemanticTokens.button.typography.small.lineHeight};\n    }\n\n    .${DS_MENTIONS_CLASS}.${DS_MENTIONS_HAS_TAGS_CLASS} .ant-mentions > textarea {\n      color: transparent !important;\n      -webkit-text-fill-color: transparent;\n      caret-color: ${dsSemanticTokens.input.text.focus};\n    }\n\n    .${DS_MENTIONS_CLASS} .${DS_MENTIONS_TAG_CLASS} {\n      display: inline-flex;\n      align-items: center;\n      background: ${dsSemanticTokens.tag.status.new.light.bg};\n      color: ${dsSemanticTokens.tag.status.new.light.text};\n      border-radius: ${dsSemanticTokens.tag.size.sm.radius}px;\n      line-height: ${dsSemanticTokens.button.typography.small.lineHeight};\n      max-height: calc(${dsSemanticTokens.button.typography.small.lineHeight} + 2px);\n      padding: 0 4px;\n      vertical-align: top;\n    }\n  `;\n\n  document.head.appendChild(style);\n}\n\ntype MentionSegment = {\n  text: string;\n  isTag: boolean;\n};\n\nfunction toMentionSegments(value: string): MentionSegment[] {\n  const segments: MentionSegment[] = [];\n  let lastIndex = 0;\n\n  value.replace(MENTION_TAG_PATTERN, (match, leadingSpace, tag, offset) => {\n    const leading = String(leadingSpace ?? '');\n    const mention = String(tag ?? '').trim();\n    const mentionStart = offset + leading.length;\n\n    if (mentionStart > lastIndex) {\n      segments.push({ text: value.slice(lastIndex, mentionStart), isTag: false });\n    }\n\n    if (mention) {\n      segments.push({ text: mention, isTag: true });\n    }\n\n    lastIndex = mentionStart + mention.length;\n    return match;\n  });\n\n  if (lastIndex < value.length) {\n    segments.push({ text: value.slice(lastIndex), isTag: false });\n  }\n\n  return segments.length > 0 ? segments : [{ text: value, isTag: false }];\n}\n\ntype AntMentionsProps = React.ComponentProps<typeof AntMentions>;\n\nexport type MentionsProps = AntMentionsProps &\n  DSFieldShellProps & {\n    onValueChange?: (nextValue: string) => void;\n    fieldDescription?: ReactNode;\n  };\n\nexport const Mentions = ({\n  fieldLabel,\n  fieldRequired,\n  fieldDescription,\n  fieldError,\n  fieldActions,\n  containerStyle,\n  clear,\n  clearable = false,\n  clearLabel,\n  clearVisibility = 'always',\n  onClear,\n  onValueChange,\n  value,\n  className,\n  ...props\n}: MentionsProps) => {\n  ensureMentionsStyles();\n\n  const generatedId = useId();\n  const shouldWrapInFieldShell = Boolean(\n    fieldLabel ||\n      fieldRequired ||\n      fieldDescription ||\n      fieldError ||\n      fieldActions ||\n      clearable ||\n      clear ||\n      onClear,\n  );\n  const controlId = props.id ?? (shouldWrapInFieldShell ? generatedId : undefined);\n  const descriptionId = controlId ? `${controlId}-description` : undefined;\n  const errorId = controlId ? `${controlId}-error` : undefined;\n  const stringValue = typeof value === 'string' ? value : '';\n  const hasMentionTags = MENTION_TAG_CHECK_PATTERN.test(stringValue);\n  const mentionSegments = hasMentionTags ? toMentionSegments(stringValue) : [];\n  const mergedClassName = [\n    className,\n    DS_MENTIONS_CLASS,\n    hasMentionTags ? DS_MENTIONS_HAS_TAGS_CLASS : undefined,\n  ]\n    .filter(Boolean)\n    .join(' ');\n  const clearAction = clear?.onClear ?? onClear;\n  const describedBy = joinDescribedByIds(\n    fieldDescription ? descriptionId : undefined,\n    fieldError ? errorId : undefined,\n  );\n\n  const control = (\n    <div className={mergedClassName}>\n      {hasMentionTags ? (\n        <div aria-hidden=\"true\" className={DS_MENTIONS_OVERLAY_CLASS}>\n          {mentionSegments.map((segment, index) =>\n            segment.isTag ? (\n              <span className={DS_MENTIONS_TAG_CLASS} key={`${index}-${segment.text}`}>\n                {segment.text}\n              </span>\n            ) : (\n              <span key={`${index}-${segment.text}`}>{segment.text}</span>\n            ),\n          )}\n        </div>\n      ) : null}\n      <AntMentions\n        {...props}\n        id={controlId}\n        className={className}\n        value={value}\n        aria-describedby={describedBy}\n        aria-invalid={fieldError ? true : undefined}\n        onChange={(nextValue) => {\n          props.onChange?.(nextValue);\n          onValueChange?.(nextValue);\n        }}\n        style={{ width: '100%', ...props.style }}\n      />\n    </div>\n  );\n\n  if (!shouldWrapInFieldShell) {\n    return control;\n  }\n\n  return (\n    <FieldShell\n      label={fieldLabel}\n      required={fieldRequired}\n      htmlFor={controlId}\n      description={fieldDescription}\n      descriptionId={descriptionId}\n      error={fieldError}\n      errorId={errorId}\n      clear={clear}\n      clearable={clearable}\n      clearLabel={clearLabel}\n      clearVisibility={clearVisibility}\n      clearValue={value}\n      onClear={() => {\n        clearAction?.();\n        onValueChange?.('');\n        props.onChange?.('');\n      }}\n      extraActions={fieldActions}\n      style={containerStyle}\n    >\n      {control}\n    </FieldShell>\n  );\n};\n"],"mappings":"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"}

package/dist-lib/forms/Mentions.js

@@ -0,0 +1,126 @@
+import { dsSemanticTokens as e } from "../theme.js";
+import { FieldShell as t } from "./FieldShell.js";
+import { t as n } from "../fieldProps-EeYy2kXb.js";
+import { Mentions as r } from "antd";
+import { useId as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/ds/forms/Mentions.tsx
+var s = "ds-clearable-mentions", c = "ds-clearable-mentions-has-tags", l = "ds-clearable-mentions-overlay", u = "ds-clearable-mentions-tag", d = "ds-clearable-mentions-style", f = /(^|\s)(@[A-Za-z0-9._-]+)/g, p = /(^|\s)@[A-Za-z0-9._-]+/;
+function m() {
+	if (typeof document > "u" || document.getElementById(d)) return;
+	let t = document.createElement("style");
+	t.id = d, t.textContent = `
+    .${s} {
+      position: relative;
+      width: 100%;
+    }
+
+    .${s} .${l} {
+      position: absolute;
+      inset: 0;
+      z-index: 1;
+      pointer-events: none;
+      white-space: pre-wrap;
+      overflow: hidden;
+      padding: ${e.input.padding.middle.y} ${e.input.padding.middle.x};
+      color: ${e.input.text.focus};
+      font-family: var(--ant-font-family);
+      font-size: ${e.button.typography.small.fontSize};
+      font-weight: 400;
+      line-height: ${e.button.typography.small.lineHeight};
+    }
+
+    .${s}.${c} .ant-mentions > textarea {
+      color: transparent !important;
+      -webkit-text-fill-color: transparent;
+      caret-color: ${e.input.text.focus};
+    }
+
+    .${s} .${u} {
+      display: inline-flex;
+      align-items: center;
+      background: ${e.tag.status.new.light.bg};
+      color: ${e.tag.status.new.light.text};
+      border-radius: ${e.tag.size.sm.radius}px;
+      line-height: ${e.button.typography.small.lineHeight};
+      max-height: calc(${e.button.typography.small.lineHeight} + 2px);
+      padding: 0 4px;
+      vertical-align: top;
+    }
+  `, document.head.appendChild(t);
+}
+function h(e) {
+	let t = [], n = 0;
+	return e.replace(f, (r, i, a, o) => {
+		let s = String(i ?? ""), c = String(a ?? "").trim(), l = o + s.length;
+		return l > n && t.push({
+			text: e.slice(n, l),
+			isTag: !1
+		}), c && t.push({
+			text: c,
+			isTag: !0
+		}), n = l + c.length, r;
+	}), n < e.length && t.push({
+		text: e.slice(n),
+		isTag: !1
+	}), t.length > 0 ? t : [{
+		text: e,
+		isTag: !1
+	}];
+}
+var g = ({ fieldLabel: e, fieldRequired: d, fieldDescription: f, fieldError: g, fieldActions: _, containerStyle: v, clear: y, clearable: b = !1, clearLabel: x, clearVisibility: S = "always", onClear: C, onValueChange: w, value: T, className: E, ...D }) => {
+	m();
+	let O = i(), k = !!(e || d || f || g || _ || b || y || C), A = D.id ?? (k ? O : void 0), j = A ? `${A}-description` : void 0, M = A ? `${A}-error` : void 0, N = typeof T == "string" ? T : "", P = p.test(N), F = P ? h(N) : [], I = [
+		E,
+		s,
+		P ? c : void 0
+	].filter(Boolean).join(" "), L = y?.onClear ?? C, R = n(f ? j : void 0, g ? M : void 0), z = /* @__PURE__ */ o("div", {
+		className: I,
+		children: [P ? /* @__PURE__ */ a("div", {
+			"aria-hidden": "true",
+			className: l,
+			children: F.map((e, t) => e.isTag ? /* @__PURE__ */ a("span", {
+				className: u,
+				children: e.text
+			}, `${t}-${e.text}`) : /* @__PURE__ */ a("span", { children: e.text }, `${t}-${e.text}`))
+		}) : null, /* @__PURE__ */ a(r, {
+			...D,
+			id: A,
+			className: E,
+			value: T,
+			"aria-describedby": R,
+			"aria-invalid": g ? !0 : void 0,
+			onChange: (e) => {
+				D.onChange?.(e), w?.(e);
+			},
+			style: {
+				width: "100%",
+				...D.style
+			}
+		})]
+	});
+	return k ? /* @__PURE__ */ a(t, {
+		label: e,
+		required: d,
+		htmlFor: A,
+		description: f,
+		descriptionId: j,
+		error: g,
+		errorId: M,
+		clear: y,
+		clearable: b,
+		clearLabel: x,
+		clearVisibility: S,
+		clearValue: T,
+		onClear: () => {
+			L?.(), w?.(""), D.onChange?.("");
+		},
+		extraActions: _,
+		style: v,
+		children: z
+	}) : z;
+};
+//#endregion
+export { g as Mentions };
+
+//# sourceMappingURL=Mentions.js.map

package/dist-lib/forms/Mentions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Mentions.js","names":[],"sources":["../../src/ds/forms/Mentions.tsx"],"sourcesContent":["import { Mentions as AntMentions } from 'antd';\nimport { useId } from 'react';\nimport type { ReactNode } from 'react';\nimport { FieldShell } from './FieldShell';\nimport type { DSFieldShellProps } from './fieldProps';\nimport { joinDescribedByIds } from './fieldProps';\nimport { dsSemanticTokens } from '../../theme/ontadaTheme';\n\nconst DS_MENTIONS_CLASS = 'ds-clearable-mentions';\nconst DS_MENTIONS_HAS_TAGS_CLASS = 'ds-clearable-mentions-has-tags';\nconst DS_MENTIONS_OVERLAY_CLASS = 'ds-clearable-mentions-overlay';\nconst DS_MENTIONS_TAG_CLASS = 'ds-clearable-mentions-tag';\nconst DS_MENTIONS_STYLE_ID = 'ds-clearable-mentions-style';\n\nconst MENTION_TAG_PATTERN = /(^|\\s)(@[A-Za-z0-9._-]+)/g;\nconst MENTION_TAG_CHECK_PATTERN = /(^|\\s)@[A-Za-z0-9._-]+/;\n\nfunction ensureMentionsStyles() {\n  if (typeof document === 'undefined') {\n    return;\n  }\n\n  if (document.getElementById(DS_MENTIONS_STYLE_ID)) {\n    return;\n  }\n\n  const style = document.createElement('style');\n  style.id = DS_MENTIONS_STYLE_ID;\n  style.textContent = `\n    .${DS_MENTIONS_CLASS} {\n      position: relative;\n      width: 100%;\n    }\n\n    .${DS_MENTIONS_CLASS} .${DS_MENTIONS_OVERLAY_CLASS} {\n      position: absolute;\n      inset: 0;\n      z-index: 1;\n      pointer-events: none;\n      white-space: pre-wrap;\n      overflow: hidden;\n      padding: ${dsSemanticTokens.input.padding.middle.y} ${dsSemanticTokens.input.padding.middle.x};\n      color: ${dsSemanticTokens.input.text.focus};\n      font-family: var(--ant-font-family);\n      font-size: ${dsSemanticTokens.button.typography.small.fontSize};\n      font-weight: 400;\n      line-height: ${dsSemanticTokens.button.typography.small.lineHeight};\n    }\n\n    .${DS_MENTIONS_CLASS}.${DS_MENTIONS_HAS_TAGS_CLASS} .ant-mentions > textarea {\n      color: transparent !important;\n      -webkit-text-fill-color: transparent;\n      caret-color: ${dsSemanticTokens.input.text.focus};\n    }\n\n    .${DS_MENTIONS_CLASS} .${DS_MENTIONS_TAG_CLASS} {\n      display: inline-flex;\n      align-items: center;\n      background: ${dsSemanticTokens.tag.status.new.light.bg};\n      color: ${dsSemanticTokens.tag.status.new.light.text};\n      border-radius: ${dsSemanticTokens.tag.size.sm.radius}px;\n      line-height: ${dsSemanticTokens.button.typography.small.lineHeight};\n      max-height: calc(${dsSemanticTokens.button.typography.small.lineHeight} + 2px);\n      padding: 0 4px;\n      vertical-align: top;\n    }\n  `;\n\n  document.head.appendChild(style);\n}\n\ntype MentionSegment = {\n  text: string;\n  isTag: boolean;\n};\n\nfunction toMentionSegments(value: string): MentionSegment[] {\n  const segments: MentionSegment[] = [];\n  let lastIndex = 0;\n\n  value.replace(MENTION_TAG_PATTERN, (match, leadingSpace, tag, offset) => {\n    const leading = String(leadingSpace ?? '');\n    const mention = String(tag ?? '').trim();\n    const mentionStart = offset + leading.length;\n\n    if (mentionStart > lastIndex) {\n      segments.push({ text: value.slice(lastIndex, mentionStart), isTag: false });\n    }\n\n    if (mention) {\n      segments.push({ text: mention, isTag: true });\n    }\n\n    lastIndex = mentionStart + mention.length;\n    return match;\n  });\n\n  if (lastIndex < value.length) {\n    segments.push({ text: value.slice(lastIndex), isTag: false });\n  }\n\n  return segments.length > 0 ? segments : [{ text: value, isTag: false }];\n}\n\ntype AntMentionsProps = React.ComponentProps<typeof AntMentions>;\n\nexport type MentionsProps = AntMentionsProps &\n  DSFieldShellProps & {\n    onValueChange?: (nextValue: string) => void;\n    fieldDescription?: ReactNode;\n  };\n\nexport const Mentions = ({\n  fieldLabel,\n  fieldRequired,\n  fieldDescription,\n  fieldError,\n  fieldActions,\n  containerStyle,\n  clear,\n  clearable = false,\n  clearLabel,\n  clearVisibility = 'always',\n  onClear,\n  onValueChange,\n  value,\n  className,\n  ...props\n}: MentionsProps) => {\n  ensureMentionsStyles();\n\n  const generatedId = useId();\n  const shouldWrapInFieldShell = Boolean(\n    fieldLabel ||\n      fieldRequired ||\n      fieldDescription ||\n      fieldError ||\n      fieldActions ||\n      clearable ||\n      clear ||\n      onClear,\n  );\n  const controlId = props.id ?? (shouldWrapInFieldShell ? generatedId : undefined);\n  const descriptionId = controlId ? `${controlId}-description` : undefined;\n  const errorId = controlId ? `${controlId}-error` : undefined;\n  const stringValue = typeof value === 'string' ? value : '';\n  const hasMentionTags = MENTION_TAG_CHECK_PATTERN.test(stringValue);\n  const mentionSegments = hasMentionTags ? toMentionSegments(stringValue) : [];\n  const mergedClassName = [\n    className,\n    DS_MENTIONS_CLASS,\n    hasMentionTags ? DS_MENTIONS_HAS_TAGS_CLASS : undefined,\n  ]\n    .filter(Boolean)\n    .join(' ');\n  const clearAction = clear?.onClear ?? onClear;\n  const describedBy = joinDescribedByIds(\n    fieldDescription ? descriptionId : undefined,\n    fieldError ? errorId : undefined,\n  );\n\n  const control = (\n    <div className={mergedClassName}>\n      {hasMentionTags ? (\n        <div aria-hidden=\"true\" className={DS_MENTIONS_OVERLAY_CLASS}>\n          {mentionSegments.map((segment, index) =>\n            segment.isTag ? (\n              <span className={DS_MENTIONS_TAG_CLASS} key={`${index}-${segment.text}`}>\n                {segment.text}\n              </span>\n            ) : (\n              <span key={`${index}-${segment.text}`}>{segment.text}</span>\n            ),\n          )}\n        </div>\n      ) : null}\n      <AntMentions\n        {...props}\n        id={controlId}\n        className={className}\n        value={value}\n        aria-describedby={describedBy}\n        aria-invalid={fieldError ? true : undefined}\n        onChange={(nextValue) => {\n          props.onChange?.(nextValue);\n          onValueChange?.(nextValue);\n        }}\n        style={{ width: '100%', ...props.style }}\n      />\n    </div>\n  );\n\n  if (!shouldWrapInFieldShell) {\n    return control;\n  }\n\n  return (\n    <FieldShell\n      label={fieldLabel}\n      required={fieldRequired}\n      htmlFor={controlId}\n      description={fieldDescription}\n      descriptionId={descriptionId}\n      error={fieldError}\n      errorId={errorId}\n      clear={clear}\n      clearable={clearable}\n      clearLabel={clearLabel}\n      clearVisibility={clearVisibility}\n      clearValue={value}\n      onClear={() => {\n        clearAction?.();\n        onValueChange?.('');\n        props.onChange?.('');\n      }}\n      extraActions={fieldActions}\n      style={containerStyle}\n    >\n      {control}\n    </FieldShell>\n  );\n};\n"],"mappings":"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"}

package/dist-lib/forms/PasswordInput.cjs

@@ -0,0 +1,2 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-Bmb41Sf3.cjs`);const e=require(`../useCustomIcon-DbSB56Pd.cjs`),t=require(`./Input.cjs`);let n=require(`antd`),r=require(`react`),i=require(`react/jsx-runtime`);var a={display:`inline-flex`,alignItems:`center`,gap:8},o=({showPasswordLabel:o=`Show password`,hidePasswordLabel:s=`Hide password`,passwordVisible:c,defaultPasswordVisible:l=!1,onPasswordVisibleChange:u,id:d,suffix:f,disabled:p,onValueChange:m,...h})=>{let g=(0,r.useId)(),_=d??g,[v,y]=(0,r.useState)(l),b=c??v,x=b?s:o,S=e=>{c??y(e),u?.(e)},C=(0,i.jsx)(n.Button,{type:`text`,htmlType:`button`,"aria-label":x,"aria-controls":_,"aria-pressed":b,title:x,disabled:p,onMouseDown:e=>e.preventDefault(),onClick:()=>S(!b),style:{paddingInline:4,height:24,minWidth:24},icon:(0,i.jsx)(`span`,{"aria-hidden":`true`,style:{display:`inline-flex`,alignItems:`center`},children:(0,i.jsx)(e.t,{name:b?`eyeOff`:`eye`,size:16})})});return(0,i.jsx)(t.Input,{id:_,type:b?`text`:`password`,disabled:p,suffix:f?(0,i.jsxs)(`span`,{style:a,children:[f,C]}):C,onValueChange:m,...h})};exports.PasswordInput=o;
+//# sourceMappingURL=PasswordInput.cjs.map

package/dist-lib/forms/PasswordInput.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordInput.cjs","names":[],"sources":["../../src/ds/forms/PasswordInput.tsx"],"sourcesContent":["import { Button } from 'antd';\nimport { useId, useState } from 'react';\nimport type { CSSProperties, ComponentProps, ReactNode } from 'react';\nimport { Icon } from '../../utils/icons';\nimport { Input } from './Input';\n\ntype InputProps = ComponentProps<typeof Input>;\n\nexport type PasswordInputProps = Omit<InputProps, 'onChange' | 'type'> & {\n  showPasswordLabel?: string;\n  hidePasswordLabel?: string;\n  passwordVisible?: boolean;\n  defaultPasswordVisible?: boolean;\n  onPasswordVisibleChange?: (visible: boolean) => void;\n};\n\nconst suffixStyle: CSSProperties = {\n  display: 'inline-flex',\n  alignItems: 'center',\n  gap: 8,\n};\n\nexport const PasswordInput = ({\n  showPasswordLabel = 'Show password',\n  hidePasswordLabel = 'Hide password',\n  passwordVisible,\n  defaultPasswordVisible = false,\n  onPasswordVisibleChange,\n  id,\n  suffix,\n  disabled,\n  onValueChange,\n  ...inputProps\n}: PasswordInputProps) => {\n  const generatedId = useId();\n  const inputId = id ?? generatedId;\n  const [internalPasswordVisible, setInternalPasswordVisible] = useState(defaultPasswordVisible);\n  const isPasswordVisible = passwordVisible ?? internalPasswordVisible;\n  const visibilityLabel = isPasswordVisible ? hidePasswordLabel : showPasswordLabel;\n\n  const setPasswordVisibility = (nextVisible: boolean) => {\n    if (passwordVisible == null) {\n      setInternalPasswordVisible(nextVisible);\n    }\n\n    onPasswordVisibleChange?.(nextVisible);\n  };\n\n  const passwordToggle = (\n    <Button\n      type=\"text\"\n      htmlType=\"button\"\n      aria-label={visibilityLabel}\n      aria-controls={inputId}\n      aria-pressed={isPasswordVisible}\n      title={visibilityLabel}\n      disabled={disabled}\n      onMouseDown={(event) => event.preventDefault()}\n      onClick={() => setPasswordVisibility(!isPasswordVisible)}\n      style={{ paddingInline: 4, height: 24, minWidth: 24 }}\n      icon={\n        <span aria-hidden=\"true\" style={{ display: 'inline-flex', alignItems: 'center' }}>\n          <Icon name={isPasswordVisible ? 'eyeOff' : 'eye'} size={16} />\n        </span>\n      }\n    />\n  );\n\n  return (\n    <Input\n      id={inputId}\n      type={isPasswordVisible ? 'text' : 'password'}\n      disabled={disabled}\n      suffix={suffix ? <span style={suffixStyle}>{suffix}{passwordToggle}</span> : passwordToggle}\n      onValueChange={onValueChange}\n      {...inputProps}\n    />\n  );\n};\n"],"mappings":"sPAgBA,IAAM,EAA6B,CACjC,QAAS,cACT,WAAY,SACZ,IAAK,EACN,CAEY,GAAiB,CAC5B,oBAAoB,gBACpB,oBAAoB,gBACpB,kBACA,yBAAyB,GACzB,0BACA,KACA,SACA,WACA,gBACA,GAAG,KACqB,CACxB,IAAM,GAAA,EAAA,EAAA,QAAqB,CACrB,EAAU,GAAM,EAChB,CAAC,EAAyB,IAAA,EAAA,EAAA,UAAuC,EAAuB,CACxF,EAAoB,GAAmB,EACvC,EAAkB,EAAoB,EAAoB,EAE1D,EAAyB,GAAyB,CAClD,GACF,EAA2B,EAAY,CAGzC,IAA0B,EAAY,EAGlC,GACJ,EAAA,EAAA,KAAC,EAAA,OAAD,CACE,KAAK,OACL,SAAS,SACT,aAAY,EACZ,gBAAe,EACf,eAAc,EACd,MAAO,EACG,WACV,YAAc,GAAU,EAAM,gBAAgB,CAC9C,YAAe,EAAsB,CAAC,EAAkB,CACxD,MAAO,CAAE,cAAe,EAAG,OAAQ,GAAI,SAAU,GAAI,CACrD,MACE,EAAA,EAAA,KAAC,OAAD,CAAM,cAAY,OAAO,MAAO,CAAE,QAAS,cAAe,WAAY,SAAU,WAC9E,EAAA,EAAA,KAAC,EAAA,EAAD,CAAM,KAAM,EAAoB,SAAW,MAAO,KAAM,GAAM,CAAA,CACzD,CAAA,CAET,CAAA,CAGJ,OACE,EAAA,EAAA,KAAC,EAAA,MAAD,CACE,GAAI,EACJ,KAAM,EAAoB,OAAS,WACzB,WACV,OAAQ,GAAS,EAAA,EAAA,MAAC,OAAD,CAAM,MAAO,WAAb,CAA2B,EAAQ,EAAsB,GAAG,EAC9D,gBACf,GAAI,EACJ,CAAA"}