@bonprix-ds/react-base-input-field 1.0.0

package/dist/index.d.ts

@@ -0,0 +1,73 @@
+import { default as default_2 } from 'react';
+import { HTMLInputAutoCompleteAttribute } from 'react';
+import { IconType } from '@bonprix-ds/react-icon';
+import { RefObject } from 'react';
+
+declare const BaseInputField: ({ type, onFocus, onBlur, onKeyDown, onKeyUp, inputRef, label, name, id, helperText, errorText, disabled, required, error, inputMode, pattern, autoComplete, autoCorrect, spellCheck, minLength, maxLength, hideClear, describedBy, buttonIcon, iconButtonType, onIconButtonClick, iconButtonLabel, componentName, ...unionProps }: Props) => default_2.JSX.Element;
+export default BaseInputField;
+
+declare interface BaseProps extends HTMLInputAttributes {
+    type: "text" | "password" | "email";
+    onFocus?: () => void;
+    onBlur?: () => void;
+    inputRef?: RefObject<HTMLInputElement | null>;
+    label?: string;
+    name?: string;
+    id?: string;
+    helperText?: string;
+    errorText?: string;
+    disabled?: boolean;
+    required?: boolean;
+    error?: boolean;
+    hideClear?: boolean;
+    describedBy?: string;
+    buttonIcon?: IconType;
+    onIconButtonClick?: () => void;
+    iconButtonType?: "button" | "submit";
+    iconButtonLabel?: string;
+    componentName: "password-field" | "text-field" | "search-field" | "email-field";
+}
+
+declare interface ControlledInputProps extends BaseProps {
+    value: string;
+    onChange: (value: string) => void;
+}
+
+export declare interface HTMLInputAttributes {
+    /** <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/inputmode" target="_blank">HTML input mode attribute.</a>  */
+    inputMode?: HTMLInputInputModeAttribute;
+    /** <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/pattern" target="_blank">HTML pattern attribute.</a>  */
+    pattern?: HTMLInputPatternAttribute;
+    /** <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete" target="_blank">HTML autocomplete attribute.</a>  */
+    autoComplete?: HTMLInputAutoCompleteAttribute;
+    /** <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/autocorrect" target="_blank">HTML autocorrect attribute.</a>  */
+    autoCorrect?: HTMLInputAutoCorrectAttribute;
+    /** <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/spellcheck" target="_blank">HTML spellcheck attribute.</a>  */
+    spellCheck?: HTMLInputSpellCheckAttribute;
+    /** <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/minlength" target="_blank">HTML minLength attribute.</a>  */
+    minLength?: number;
+    /** <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/maxlength" target="_blank">HTML maxlength attribute.</a>  */
+    maxLength?: number;
+    /** Callback, that is triggered on key down. */
+    onKeyDown?: () => void;
+    /** Callback that is triggered on key up. */
+    onKeyUp?: () => void;
+}
+
+declare type HTMLInputAutoCorrectAttribute = "on" | "off";
+
+declare type HTMLInputInputModeAttribute = "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search";
+
+declare type HTMLInputPatternAttribute = HTMLInputElement["pattern"];
+
+declare type HTMLInputSpellCheckAttribute = HTMLInputElement["spellcheck"];
+
+declare type Props = ControlledInputProps | UncontrolledInputProps;
+
+declare interface UncontrolledInputProps extends BaseProps {
+    value?: never;
+    defaultValue: string;
+    onChange?: (value: string) => void;
+}
+
+export { }

package/dist/index.js

@@ -0,0 +1,135 @@
+import { InputWrapper as e } from "@bonprix-ds/internal-components";
+import t from "@bonprix-ds/react-icon-button";
+import { useId as n, useRef as r, useState as i } from "react";
+import { tv as a } from "tailwind-variants";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/BaseInputField.tsx
+var c = a({
+	slots: {
+		root: "preflight w-full group",
+		container: "input flex gap-3 px-3 py-[0.6875rem]",
+		input: "w-full flex-grow outline-none text-ellipsis text-inherit typography-input-text bg-transparent",
+		buttonSection: "flex gap-2 items-center",
+		clearButton: "invisible",
+		iconSeparator: "invisible w-0.25 h-5 bg-clr-on-bg-low"
+	},
+	variants: {
+		hasValue: {
+			true: "",
+			false: ""
+		},
+		disabled: {
+			true: "",
+			false: ""
+		},
+		hideClear: { true: { input: "h-6" } },
+		error: {
+			true: "",
+			false: ""
+		}
+	},
+	compoundVariants: [{
+		hasValue: !0,
+		disabled: !1,
+		class: {
+			clearButton: "group-hover:visible group-focus-within:visible",
+			iconSeparator: "group-hover:visible group-focus-within:visible"
+		}
+	}, {
+		disabled: !1,
+		error: !0,
+		class: { input: "[-webkit-text-fill-color:var(--color-fg-error)] text-clr-primary" }
+	}]
+}), l = ({ type: a, onFocus: l, onBlur: u, onKeyDown: d, onKeyUp: f, inputRef: p, label: m, name: h, id: g, helperText: _ = "", errorText: v = "", disabled: y = !1, required: b = !1, error: x = !1, inputMode: S, pattern: ee, autoComplete: C, autoCorrect: w, spellCheck: T, minLength: te, maxLength: E, hideClear: D = !1, describedBy: O, buttonIcon: k, iconButtonType: A = "button", onIconButtonClick: j, iconButtonLabel: M, componentName: N, ...P }) => {
+	let F = n(), I = g ?? F, L = n(), R = n(), z;
+	z = P.value === void 0 ? !!P.defaultValue : !!P.value;
+	let [B, V] = i(!1), [H, U] = i(z), W = H || B, G = r(null), K = p ?? G, { root: q, container: J, input: Y, buttonSection: X, clearButton: Z, iconSeparator: Q } = c({
+		disabled: y,
+		hasValue: H,
+		hideClear: D,
+		error: x
+	}), ne = () => {
+		V(!0), l && l();
+	}, re = () => {
+		V(!1), u && u();
+	}, ie = (e) => {
+		let t = e.currentTarget.value;
+		P.onChange?.(t), H !== !!t && U(!!t);
+	}, ae = () => {
+		P.value ? P.onChange("") : K.current && (K.current.value = ""), U(!1), K.current?.focus();
+	}, oe = k && !D, se = !D || k, $;
+	return _ && ($ = L), !y && x && v && ($ = $ ? $ + " " + R : R), O && ($ = $ ? $ + " " + O : O), /* @__PURE__ */ o("div", {
+		className: q(),
+		"data-fix-chrome-page-load-autofill": !0,
+		children: /* @__PURE__ */ o(e, {
+			label: m,
+			id: I,
+			labelFloated: W,
+			disabled: y,
+			required: b,
+			helperText: _,
+			helperTextId: L,
+			error: x,
+			errorText: v,
+			errorTextId: R,
+			componentName: N,
+			children: /* @__PURE__ */ s("div", {
+				className: J(),
+				children: [/* @__PURE__ */ o("input", {
+					...P,
+					type: a,
+					className: Y(),
+					id: I,
+					name: h,
+					onChange: ie,
+					onFocus: ne,
+					onBlur: re,
+					onKeyDown: d,
+					onKeyUp: f,
+					inputMode: S,
+					pattern: ee,
+					autoComplete: C,
+					autoCorrect: w,
+					spellCheck: T,
+					ref: K,
+					minLength: te,
+					maxLength: E,
+					required: b,
+					"aria-describedby": $,
+					"aria-invalid": x ? "true" : void 0,
+					disabled: y,
+					"data-bpds-hide-clear": D
+				}), se && /* @__PURE__ */ s("div", {
+					className: X(),
+					children: [
+						!D && /* @__PURE__ */ o("div", {
+							className: Z(),
+							children: /* @__PURE__ */ o(t, {
+								variant: "tertiary",
+								size: "small",
+								type: "button",
+								icon: "closer",
+								onClick: ae,
+								label: "Eingabe löschen"
+							})
+						}),
+						oe && /* @__PURE__ */ o("span", { className: Q() }),
+						k && /* @__PURE__ */ o(t, {
+							variant: "tertiary",
+							size: "small",
+							type: A,
+							icon: k,
+							onClick: j,
+							label: M,
+							disabled: y
+						})
+					]
+				})]
+			})
+		})
+	});
+};
+//#endregion
+export { l as default };
+
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../src/BaseInputField.tsx"],"sourcesContent":["import { InputWrapper } from \"@bonprix-ds/internal-components\";\nimport type { IconType } from \"@bonprix-ds/react-icon\";\nimport IconButton from \"@bonprix-ds/react-icon-button\";\nimport React, { HTMLInputAutoCompleteAttribute, RefObject, useId, useRef, useState } from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nconst generateClasses = tv({\n  slots: {\n    root: \"preflight w-full group\",\n    container: \"input flex gap-3 px-3 py-[0.6875rem]\",\n    input: \"w-full flex-grow outline-none text-ellipsis text-inherit typography-input-text bg-transparent\",\n    buttonSection: \"flex gap-2 items-center\",\n    clearButton: \"invisible\",\n    iconSeparator: \"invisible w-0.25 h-5 bg-clr-on-bg-low\",\n  },\n  variants: {\n    hasValue: {\n      true: \"\",\n      false: \"\",\n    },\n    disabled: {\n      true: \"\",\n      false: \"\",\n    },\n    hideClear: {\n      true: {\n        input: \"h-6\", // preserve 24px height without buttons\n      },\n    },\n    error: {\n      true: \"\",\n      false: \"\",\n    },\n  },\n  compoundVariants: [\n    {\n      hasValue: true,\n      disabled: false,\n      class: {\n        clearButton: \"group-hover:visible group-focus-within:visible\",\n        iconSeparator: \"group-hover:visible group-focus-within:visible\",\n      },\n    },\n    {\n      disabled: false,\n      error: true,\n      class: {\n        // This makes sure the calendar icon is black-ish in Firefox even when the value is marked red.\n        // Without this, the icon in Firefox would take the red color as well, which is inconsistent with Chrome and not what we want design-wise.\n        // This is a known limitation within Firefox, and we do our best to make the native inputs align, s.: https://bugzilla.mozilla.org/show_bug.cgi?id=1817839\n        input: \"[-webkit-text-fill-color:var(--color-fg-error)] text-clr-primary\",\n      },\n    },\n  ],\n});\n\nexport interface HTMLInputAttributes {\n  /** <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/inputmode\" target=\"_blank\">HTML input mode attribute.</a>  */\n  inputMode?: HTMLInputInputModeAttribute;\n  /** <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/pattern\" target=\"_blank\">HTML pattern attribute.</a>  */\n  pattern?: HTMLInputPatternAttribute;\n  /** <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete\" target=\"_blank\">HTML autocomplete attribute.</a>  */\n  autoComplete?: HTMLInputAutoCompleteAttribute;\n  /** <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/autocorrect\" target=\"_blank\">HTML autocorrect attribute.</a>  */\n  autoCorrect?: HTMLInputAutoCorrectAttribute;\n  /** <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/spellcheck\" target=\"_blank\">HTML spellcheck attribute.</a>  */\n  spellCheck?: HTMLInputSpellCheckAttribute;\n  /** <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/minlength\" target=\"_blank\">HTML minLength attribute.</a>  */\n  minLength?: number;\n  /** <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/maxlength\" target=\"_blank\">HTML maxlength attribute.</a>  */\n  maxLength?: number;\n  /** Callback, that is triggered on key down. */\n  onKeyDown?: () => void;\n  /** Callback that is triggered on key up. */\n  onKeyUp?: () => void;\n}\n\ntype HTMLInputInputModeAttribute = \"none\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | \"search\";\ntype HTMLInputPatternAttribute = HTMLInputElement[\"pattern\"];\ntype HTMLInputAutoCorrectAttribute = \"on\" | \"off\";\ntype HTMLInputSpellCheckAttribute = HTMLInputElement[\"spellcheck\"];\n\ninterface BaseProps extends HTMLInputAttributes {\n  type: \"text\" | \"password\" | \"email\";\n  onFocus?: () => void;\n  onBlur?: () => void;\n  inputRef?: RefObject<HTMLInputElement | null>;\n  label?: string;\n  name?: string;\n  id?: string;\n  helperText?: string;\n  errorText?: string;\n  disabled?: boolean;\n  required?: boolean;\n  error?: boolean;\n  hideClear?: boolean;\n  describedBy?: string;\n  buttonIcon?: IconType;\n  onIconButtonClick?: () => void;\n  iconButtonType?: \"button\" | \"submit\";\n  iconButtonLabel?: string;\n  componentName: \"password-field\" | \"text-field\" | \"search-field\" | \"email-field\";\n}\n\ninterface ControlledInputProps extends BaseProps {\n  value: string;\n  onChange: (value: string) => void;\n}\n\ninterface UncontrolledInputProps extends BaseProps {\n  value?: never;\n  defaultValue: string;\n  onChange?: (value: string) => void;\n}\n\ntype Props = ControlledInputProps | UncontrolledInputProps;\n\nconst BaseInputField = ({\n  type,\n  onFocus,\n  onBlur,\n  onKeyDown,\n  onKeyUp,\n  inputRef,\n  label,\n  name,\n  id,\n  helperText = \"\",\n  errorText = \"\",\n  disabled = false,\n  required = false,\n  error = false,\n  inputMode,\n  pattern,\n  autoComplete,\n  autoCorrect,\n  spellCheck,\n  minLength,\n  maxLength,\n  hideClear = false,\n  describedBy,\n  buttonIcon,\n  iconButtonType = \"button\",\n  onIconButtonClick,\n  iconButtonLabel,\n  componentName,\n  ...unionProps\n}: Props) => {\n  const generatedId = useId();\n  const calculatedId = id ?? generatedId;\n  const helperTextId = useId();\n  const errorTextId = useId();\n  let initialHasValue: boolean;\n  if (unionProps.value !== undefined) {\n    initialHasValue = Boolean(unionProps.value);\n  } else {\n    initialHasValue = Boolean(unionProps.defaultValue);\n  }\n\n  const [focused, setFocused] = useState(false);\n  const [hasValue, setHasValue] = useState(initialHasValue);\n\n  const labelFloated = hasValue || focused;\n\n  const innerRef = useRef<HTMLInputElement>(null);\n  const ref = inputRef ?? innerRef;\n\n  const { root, container, input, buttonSection, clearButton, iconSeparator } = generateClasses({\n    disabled,\n    hasValue,\n    hideClear,\n    error,\n  });\n\n  const handleFocus = () => {\n    setFocused(true);\n    if (onFocus) {\n      onFocus();\n    }\n  };\n\n  const handleBlur = () => {\n    setFocused(false);\n    if (onBlur) {\n      onBlur();\n    }\n  };\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const newValue = e.currentTarget.value;\n    unionProps.onChange?.(newValue);\n    if (hasValue !== Boolean(newValue)) {\n      setHasValue(Boolean(newValue));\n    }\n  };\n\n  const clearLabel = \"Eingabe löschen\";\n  const handleClear = () => {\n    if (unionProps.value) {\n      unionProps.onChange(\"\");\n    } else {\n      if (ref.current) {\n        ref.current.value = \"\";\n      }\n    }\n    setHasValue(false);\n    ref.current?.focus();\n  };\n\n  const showSeparator = buttonIcon && !hideClear;\n  const showButtonSection = !hideClear || buttonIcon;\n\n  let ariaDescribedBy;\n  if (helperText) {\n    ariaDescribedBy = helperTextId;\n  }\n  if (!disabled && error && errorText) {\n    ariaDescribedBy = ariaDescribedBy ? ariaDescribedBy + \" \" + errorTextId : errorTextId;\n  }\n  if (describedBy) {\n    ariaDescribedBy = ariaDescribedBy ? ariaDescribedBy + \" \" + describedBy : describedBy;\n  }\n\n  return (\n    // The data-attribute is used to reliably select this element to fix a bug with autofill in Chrome,\n    // where labels wouldn't float to the top when autofilling on initial page load.\n    // We need to ensure this CSS is present early on in the rendering process,\n    // so we can't keep it alongside our component and must move it to global CSS, hence the data-attribute.\n    <div className={root()} data-fix-chrome-page-load-autofill>\n      <InputWrapper\n        label={label}\n        id={calculatedId}\n        labelFloated={labelFloated}\n        disabled={disabled}\n        required={required}\n        helperText={helperText}\n        helperTextId={helperTextId}\n        error={error}\n        errorText={errorText}\n        errorTextId={errorTextId}\n        componentName={componentName}\n      >\n        <div className={container()}>\n          <input\n            {...unionProps}\n            type={type}\n            className={input()}\n            id={calculatedId}\n            name={name}\n            onChange={handleChange}\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n            onKeyDown={onKeyDown}\n            onKeyUp={onKeyUp}\n            inputMode={inputMode}\n            pattern={pattern}\n            autoComplete={autoComplete}\n            autoCorrect={autoCorrect}\n            spellCheck={spellCheck}\n            ref={ref}\n            minLength={minLength}\n            maxLength={maxLength}\n            required={required}\n            aria-describedby={ariaDescribedBy}\n            aria-invalid={error ? \"true\" : undefined}\n            disabled={disabled}\n            data-bpds-hide-clear={hideClear}\n          />\n          {showButtonSection && (\n            <div className={buttonSection()}>\n              {!hideClear && (\n                <div className={clearButton()}>\n                  <IconButton variant=\"tertiary\" size=\"small\" type=\"button\" icon=\"closer\" onClick={handleClear} label={clearLabel} />\n                </div>\n              )}\n              {showSeparator && <span className={iconSeparator()}></span>}\n              {buttonIcon && (\n                <IconButton\n                  variant=\"tertiary\"\n                  size=\"small\"\n                  type={iconButtonType}\n                  icon={buttonIcon}\n                  onClick={onIconButtonClick}\n                  label={iconButtonLabel!}\n                  disabled={disabled}\n                />\n              )}\n            </div>\n          )}\n        </div>\n      </InputWrapper>\n    </div>\n  );\n};\n\nexport default BaseInputField;\n"],"mappings":"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"}

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@bonprix-ds/react-base-input-field",
+  "version": "1.0.0",
+  "description": "BaseInputField component, implemented in React, for the Bonprix Design System.",
+  "type": "module",
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "module": "./dist/index.js",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "keywords": [],
+  "author": "",
+  "license": "UNLICENSED",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/bonprix/design-system.git",
+    "directory": "packages/react/base-input-field"
+  },
+  "dependencies": {
+    "@bonprix-ds/utils": "0.2.1",
+    "@bonprix-ds/react-icon": "1.1.3",
+    "@bonprix-ds/internal-components": "0.1.5",
+    "@bonprix-ds/react-icon-button": "1.1.5"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwind-variants": "0.3.1"
+  },
+  "devDependencies": {
+    "vite": "8.2.2",
+    "@types/react": "19.2.18",
+    "@vitejs/plugin-react": "6.1.1",
+    "rollup-preserve-directives": "1.1.3",
+    "unplugin-dts": "1.1.0",
+    "@microsoft/api-extractor": "7.59.1"
+  },
+  "scripts": {
+    "build": "vite build"
+  }
+}