@thunderid/react 0.1.0 → 0.3.0

package/dist/components/primitives/Logo/Logo.styles.js

@@ -0,0 +1,50 @@
+import { useMemo } from "react";
+import { css } from "@emotion/css";
+
+//#region src/components/primitives/Logo/Logo.styles.ts
+/**
+* Creates styles for the Logo component using BEM methodology
+* @param theme - The theme object containing design tokens
+* @param colorScheme - The current color scheme (used for memoization)
+* @param size - The size of the logo
+* @returns Object containing CSS class names for component styling
+*/
+const useStyles = (theme, colorScheme, size) => useMemo(() => {
+	const baseLogo = css`
+      width: auto;
+      object-fit: contain;
+      display: block;
+    `;
+	const smallLogo = css`
+      height: 32px;
+      max-width: 120px;
+    `;
+	const mediumLogo = css`
+      height: 48px;
+      max-width: 180px;
+    `;
+	const largeLogo = css`
+      height: 64px;
+      max-width: 240px;
+    `;
+	return {
+		large: largeLogo,
+		logo: baseLogo,
+		medium: mediumLogo,
+		size: {
+			large: largeLogo,
+			medium: mediumLogo,
+			small: smallLogo
+		}[size],
+		small: smallLogo
+	};
+}, [
+	theme,
+	colorScheme,
+	size
+]);
+var Logo_styles_default = useStyles;
+
+//#endregion
+export { Logo_styles_default as default };
+//# sourceMappingURL=Logo.styles.js.map

package/dist/components/primitives/Logo/Logo.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Logo.styles.js","names":["baseLogo: string","smallLogo: string","mediumLogo: string","largeLogo: string"],"sources":["../../../../src/components/primitives/Logo/Logo.styles.ts"],"sourcesContent":["/**\n * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {css} from '@emotion/css';\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\n\nexport type LogoSize = 'small' | 'medium' | 'large';\n\n/**\n * Creates styles for the Logo component using BEM methodology\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @param size - The size of the logo\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (theme: Theme, colorScheme: string, size: LogoSize): Record<string, string> =>\n  useMemo(() => {\n    const baseLogo: string = css`\n      width: auto;\n      object-fit: contain;\n      display: block;\n    `;\n\n    const smallLogo: string = css`\n      height: 32px;\n      max-width: 120px;\n    `;\n\n    const mediumLogo: string = css`\n      height: 48px;\n      max-width: 180px;\n    `;\n\n    const largeLogo: string = css`\n      height: 64px;\n      max-width: 240px;\n    `;\n\n    const sizeStyles: Record<string, string> = {\n      large: largeLogo,\n      medium: mediumLogo,\n      small: smallLogo,\n    };\n\n    return {\n      large: largeLogo,\n      logo: baseLogo,\n      medium: mediumLogo,\n      size: sizeStyles[size],\n      small: smallLogo,\n    };\n  }, [theme, colorScheme, size]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;AA+BA,MAAM,aAAa,OAAc,aAAqB,SACpD,cAAc;CACZ,MAAMA,WAAmB,GAAG;;;;;CAM5B,MAAMC,YAAoB,GAAG;;;;CAK7B,MAAMC,aAAqB,GAAG;;;;CAK9B,MAAMC,YAAoB,GAAG;;;;AAW7B,QAAO;EACL,OAAO;EACP,MAAM;EACN,QAAQ;EACR,MAVyC;GACzC,OAAO;GACP,QAAQ;GACR,OAAO;GACR,CAMkB;EACjB,OAAO;EACR;GACA;CAAC;CAAO;CAAa;CAAK,CAAC;AAEhC,0BAAe"}

package/dist/components/primitives/MultiInput/MultiInput.js

@@ -0,0 +1,137 @@
+import useTheme_default from "../../../contexts/Theme/useTheme.js";
+import FormControl_default from "../FormControl/FormControl.js";
+import InputLabel_default from "../InputLabel/InputLabel.js";
+import Checkbox_default from "../Checkbox/Checkbox.js";
+import DatePicker_default from "../DatePicker/DatePicker.js";
+import TextField_default from "../TextField/TextField.js";
+import MultiInput_styles_default from "./MultiInput.styles.js";
+import { bem, withVendorCSSClassPrefix } from "@thunderid/browser";
+import { useCallback, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@emotion/css";
+
+//#region src/components/primitives/MultiInput/MultiInput.tsx
+const MultiInput = ({ label, error, required, className, disabled, helperText, placeholder = "Enter value", values = [], onChange, type = "text", fieldType = "STRING", startIcon, endIcon, minFields = 1, maxFields, style = {} }) => {
+	const { theme, colorScheme } = useTheme_default();
+	const canAddMore = !maxFields || values.length < maxFields;
+	const canRemove = values.length > minFields;
+	const styles = MultiInput_styles_default(theme, colorScheme, !!disabled, !!error, canAddMore, canRemove);
+	const PlusIcon = ({ iconClassName }) => /* @__PURE__ */ jsx("svg", {
+		width: "16",
+		height: "16",
+		viewBox: "0 0 24 24",
+		className: cx(styles["icon"], iconClassName),
+		children: /* @__PURE__ */ jsx("path", { d: "M12 5v14M5 12h14" })
+	});
+	const BinIcon = ({ iconClassName }) => /* @__PURE__ */ jsx("svg", {
+		width: "16",
+		height: "16",
+		viewBox: "0 0 24 24",
+		className: cx(styles["icon"], iconClassName),
+		children: /* @__PURE__ */ jsx("path", { d: "M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6h14ZM10 11v6M14 11v6" })
+	});
+	const handleAddValue = useCallback((newValue) => {
+		if (newValue.trim() !== "" && (!maxFields || values.length < maxFields)) onChange([...values, newValue.trim()]);
+	}, [
+		values,
+		onChange,
+		maxFields
+	]);
+	const handleRemoveValue = useCallback((index) => {
+		if (values.length > minFields) onChange(values.filter((_, i) => i !== index));
+	}, [
+		values,
+		onChange,
+		minFields
+	]);
+	const renderInputField = useCallback((value, onValueChange, attachedEndIcon, onEndIconClick) => {
+		const handleInputChange = (e) => {
+			onValueChange(e.target ? e.target.value : e);
+		};
+		const handleKeyDown = (e) => {
+			if (e.key === "Enter" && onEndIconClick) {
+				e.preventDefault();
+				onEndIconClick();
+			}
+		};
+		const commonProps = {
+			disabled,
+			endIcon: attachedEndIcon || endIcon,
+			error,
+			onChange: handleInputChange,
+			onEndIconClick,
+			onKeyDown: handleKeyDown,
+			placeholder,
+			startIcon,
+			value
+		};
+		switch (fieldType) {
+			case "DATE_TIME": return /* @__PURE__ */ jsx(DatePicker_default, { ...commonProps });
+			case "BOOLEAN": return /* @__PURE__ */ jsx(Checkbox_default, {
+				...commonProps,
+				checked: value === "true" || Boolean(value),
+				onChange: (e) => onValueChange(e.target.checked ? "true" : "false")
+			});
+			default: return /* @__PURE__ */ jsx(TextField_default, {
+				...commonProps,
+				type
+			});
+		}
+	}, [
+		placeholder,
+		disabled,
+		startIcon,
+		endIcon,
+		error,
+		fieldType,
+		type
+	]);
+	const [currentInputValue, setCurrentInputValue] = useState("");
+	const handleInputSubmit = useCallback(() => {
+		if (currentInputValue.trim() !== "") {
+			handleAddValue(currentInputValue);
+			setCurrentInputValue("");
+		}
+	}, [currentInputValue, handleAddValue]);
+	return /* @__PURE__ */ jsxs(FormControl_default, {
+		error,
+		helperText,
+		className: cx(withVendorCSSClassPrefix(bem("multi-input")), className),
+		style,
+		children: [label && /* @__PURE__ */ jsx(InputLabel_default, {
+			required,
+			error: !!error,
+			children: label
+		}), /* @__PURE__ */ jsxs("div", {
+			className: cx(withVendorCSSClassPrefix(bem("multi-input", "container")), styles["container"]),
+			children: [/* @__PURE__ */ jsx("div", {
+				className: cx(withVendorCSSClassPrefix(bem("multi-input", "input-row")), styles["inputRow"]),
+				children: /* @__PURE__ */ jsx("div", {
+					className: cx(withVendorCSSClassPrefix(bem("multi-input", "input-wrapper")), styles["inputWrapper"]),
+					children: renderInputField(currentInputValue, setCurrentInputValue, canAddMore ? /* @__PURE__ */ jsx(PlusIcon, { iconClassName: styles["plusIcon"] }) : void 0, canAddMore ? handleInputSubmit : void 0)
+				})
+			}), values.length > 0 && /* @__PURE__ */ jsx("div", {
+				className: cx(withVendorCSSClassPrefix(bem("multi-input", "list-container")), styles["listContainer"]),
+				children: values.map((value, index) => /* @__PURE__ */ jsxs("div", {
+					className: cx(withVendorCSSClassPrefix(bem("multi-input", "list-item")), styles["listItem"]),
+					children: [/* @__PURE__ */ jsx("span", {
+						className: cx(withVendorCSSClassPrefix(bem("multi-input", "list-item-text")), styles["listItemText"]),
+						children: value
+					}), canRemove && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => handleRemoveValue(index),
+						disabled,
+						className: cx(withVendorCSSClassPrefix(bem("multi-input", "remove-button")), styles["removeButton"]),
+						title: "Remove value",
+						children: /* @__PURE__ */ jsx(BinIcon, { iconClassName: styles["icon"] })
+					})]
+				}, index))
+			})]
+		})]
+	});
+};
+var MultiInput_default = MultiInput;
+
+//#endregion
+export { MultiInput_default as default };
+//# sourceMappingURL=MultiInput.js.map

package/dist/components/primitives/MultiInput/MultiInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiInput.js","names":["MultiInput: FC<MultiInputProps>","useTheme","canAddMore: boolean","canRemove: boolean","styles: Record<string, string>","useStyles","PlusIcon: FC<IconProps>","BinIcon: FC<IconProps>","handleAddValue: ReturnType<typeof useCallback>","handleRemoveValue: ReturnType<typeof useCallback>","renderInputField: ReturnType<typeof useCallback>","commonProps: Record<string, unknown>","DatePicker","Checkbox","TextField","handleInputSubmit: ReturnType<typeof useCallback>","FormControl","InputLabel"],"sources":["../../../../src/components/primitives/MultiInput/MultiInput.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {cx} from '@emotion/css';\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {CSSProperties, FC, KeyboardEvent, ReactElement, ReactNode, useCallback, useState} from 'react';\nimport useStyles from './MultiInput.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport Checkbox from '../Checkbox/Checkbox';\nimport DatePicker from '../DatePicker/DatePicker';\nimport FormControl from '../FormControl/FormControl';\nimport InputLabel from '../InputLabel/InputLabel';\nimport TextField from '../TextField/TextField';\n\nexport type MultiInputType = 'text' | 'email' | 'tel' | 'url' | 'password' | 'date' | 'boolean';\nexport type MultiInputFieldType = 'STRING' | 'DATE_TIME' | 'BOOLEAN';\n\nexport interface MultiInputProps {\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n  /**\n   * Whether the field is disabled\n   */\n  disabled?: boolean;\n  /**\n   * Icon to display at the end (right) of each input (in addition to add/remove buttons)\n   */\n  endIcon?: ReactNode;\n  /**\n   * Error message to display below the inputs\n   */\n  error?: string;\n  /**\n   * Field type for different input components\n   */\n  fieldType?: MultiInputFieldType;\n  /**\n   * Helper text to display below the inputs\n   */\n  helperText?: string;\n  /**\n   * Label text to display above the inputs\n   */\n  label?: string;\n  /**\n   * Maximum number of fields to allow (default: unlimited)\n   */\n  maxFields?: number;\n  /**\n   * Minimum number of fields to show (default: 1)\n   */\n  minFields?: number;\n  /**\n   * Callback when values change\n   */\n  onChange: (values: string[]) => void;\n  /**\n   * Placeholder text for input fields\n   */\n  placeholder?: string;\n  /**\n   * Whether the field is required\n   */\n  required?: boolean;\n  /**\n   * Icon to display at the start (left) of each input\n   */\n  startIcon?: ReactNode;\n  /**\n   * Custom style object\n   */\n  style?: CSSProperties;\n  /**\n   * Input type\n   */\n  type?: MultiInputType;\n  /**\n   * Array of values\n   */\n  values: string[];\n}\n\ninterface IconProps {\n  iconClassName?: string;\n}\n\nconst MultiInput: FC<MultiInputProps> = ({\n  label,\n  error,\n  required,\n  className,\n  disabled,\n  helperText,\n  placeholder = 'Enter value',\n  values = [],\n  onChange,\n  type = 'text',\n  fieldType = 'STRING',\n  startIcon,\n  endIcon,\n  minFields = 1,\n  maxFields,\n  style = {},\n}: MultiInputProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const canAddMore: boolean = !maxFields || values.length < maxFields;\n  const canRemove: boolean = values.length > minFields;\n  const styles: Record<string, string> = useStyles(theme, colorScheme, !!disabled, !!error, canAddMore, canRemove);\n\n  const PlusIcon: FC<IconProps> = ({iconClassName}: IconProps): ReactElement => (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" className={cx(styles['icon'], iconClassName)}>\n      <path d=\"M12 5v14M5 12h14\" />\n    </svg>\n  );\n\n  const BinIcon: FC<IconProps> = ({iconClassName}: IconProps): ReactElement => (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" className={cx(styles['icon'], iconClassName)}>\n      <path d=\"M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6h14ZM10 11v6M14 11v6\" />\n    </svg>\n  );\n\n  const handleAddValue: ReturnType<typeof useCallback> = useCallback(\n    (newValue: string) => {\n      if (newValue.trim() !== '' && (!maxFields || values.length < maxFields)) {\n        onChange([...values, newValue.trim()]);\n      }\n    },\n    [values, onChange, maxFields],\n  );\n\n  const handleRemoveValue: ReturnType<typeof useCallback> = useCallback(\n    (index: number) => {\n      if (values.length > minFields) {\n        const updatedValues: string[] = values.filter((_: string, i: number) => i !== index);\n        onChange(updatedValues);\n      }\n    },\n    [values, onChange, minFields],\n  );\n\n  const renderInputField: ReturnType<typeof useCallback> = useCallback(\n    (\n      value: string,\n      onValueChange: (value: string) => void,\n      attachedEndIcon?: ReactNode,\n      onEndIconClick?: () => void,\n    ): ReactElement => {\n      const handleInputChange = (e: any): void => {\n        const newValue: string = e.target ? e.target.value : e;\n        onValueChange(newValue);\n      };\n\n      const handleKeyDown = (e: KeyboardEvent): void => {\n        if (e.key === 'Enter' && onEndIconClick) {\n          e.preventDefault();\n          onEndIconClick();\n        }\n      };\n\n      const finalEndIcon: ReactNode = attachedEndIcon || endIcon;\n\n      const commonProps: Record<string, unknown> = {\n        disabled,\n        endIcon: finalEndIcon,\n        error,\n        onChange: handleInputChange,\n        onEndIconClick,\n        onKeyDown: handleKeyDown,\n        placeholder,\n        startIcon,\n        value,\n      };\n\n      switch (fieldType) {\n        case 'DATE_TIME':\n          return <DatePicker {...commonProps} />;\n        case 'BOOLEAN':\n          return (\n            <Checkbox\n              {...commonProps}\n              checked={value === 'true' || Boolean(value)}\n              onChange={(e: any): void => onValueChange(e.target.checked ? 'true' : 'false')}\n            />\n          );\n        default:\n          return <TextField {...commonProps} type={type} />;\n      }\n    },\n    [placeholder, disabled, startIcon, endIcon, error, fieldType, type],\n  );\n\n  // State for the current input value\n  const [currentInputValue, setCurrentInputValue] = useState('');\n\n  const handleInputSubmit: ReturnType<typeof useCallback> = useCallback((): void => {\n    if (currentInputValue.trim() !== '') {\n      handleAddValue(currentInputValue);\n      setCurrentInputValue('');\n    }\n  }, [currentInputValue, handleAddValue]);\n\n  return (\n    <FormControl\n      error={error}\n      helperText={helperText}\n      className={cx(withVendorCSSClassPrefix(bem('multi-input')), className)}\n      style={style}\n    >\n      {label && (\n        <InputLabel required={required} error={!!error}>\n          {label}\n        </InputLabel>\n      )}\n      <div className={cx(withVendorCSSClassPrefix(bem('multi-input', 'container')), styles['container'])}>\n        {/* Input field at the top */}\n        <div className={cx(withVendorCSSClassPrefix(bem('multi-input', 'input-row')), styles['inputRow'])}>\n          <div className={cx(withVendorCSSClassPrefix(bem('multi-input', 'input-wrapper')), styles['inputWrapper'])}>\n            {renderInputField(\n              currentInputValue,\n              setCurrentInputValue,\n              canAddMore ? <PlusIcon iconClassName={styles['plusIcon']} /> : undefined,\n              canAddMore ? handleInputSubmit : undefined,\n            )}\n          </div>\n        </div>\n\n        {/* List of added items */}\n        {values.length > 0 && (\n          <div className={cx(withVendorCSSClassPrefix(bem('multi-input', 'list-container')), styles['listContainer'])}>\n            {values.map((value: string, index: number) => (\n              <div\n                key={index}\n                className={cx(withVendorCSSClassPrefix(bem('multi-input', 'list-item')), styles['listItem'])}\n              >\n                <span\n                  className={cx(withVendorCSSClassPrefix(bem('multi-input', 'list-item-text')), styles['listItemText'])}\n                >\n                  {value}\n                </span>\n                {canRemove && (\n                  <button\n                    type=\"button\"\n                    onClick={(): void => handleRemoveValue(index)}\n                    disabled={disabled}\n                    className={cx(\n                      withVendorCSSClassPrefix(bem('multi-input', 'remove-button')),\n                      styles['removeButton'],\n                    )}\n                    title=\"Remove value\"\n                  >\n                    <BinIcon iconClassName={styles['icon']} />\n                  </button>\n                )}\n              </div>\n            ))}\n          </div>\n        )}\n      </div>\n    </FormControl>\n  );\n};\n\nexport default MultiInput;\n"],"mappings":"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"}

package/dist/components/primitives/MultiInput/MultiInput.styles.js

@@ -0,0 +1,112 @@
+import { useMemo } from "react";
+import { css } from "@emotion/css";
+
+//#region src/components/primitives/MultiInput/MultiInput.styles.ts
+/**
+* Creates styles for the MultiInput component using BEM methodology
+* @param theme - The theme object containing design tokens
+* @param colorScheme - The current color scheme (used for memoization)
+* @param disabled - Whether the component is disabled
+* @param hasError - Whether the component has an error
+* @param canAddMore - Whether more items can be added
+* @param canRemove - Whether items can be removed
+* @returns Object containing CSS class names for component styling
+*/
+const useStyles = (theme, colorScheme, disabled, hasError, canAddMore, canRemove) => useMemo(() => {
+	const container = css`
+      display: flex;
+      flex-direction: column;
+      gap: ${theme.vars.spacing.unit};
+    `;
+	const inputRow = css`
+      display: flex;
+      align-items: center;
+      gap: ${theme.vars.spacing.unit};
+      position: relative;
+    `;
+	const inputWrapper = css`
+      flex: 1;
+    `;
+	const plusIcon = css`
+      background: ${theme.vars.colors.secondary.main};
+      border-radius: 50%;
+      outline: 4px ${theme.vars.colors.secondary.main} auto;
+      color: ${theme.vars.colors.secondary.contrastText};
+    `;
+	const listContainer = css`
+      display: flex;
+      flex-direction: column;
+      gap: 0;
+    `;
+	const listItem = css`
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: ${theme.vars.spacing.unit} calc(${theme.vars.spacing.unit} * 1.5);
+      background-color: ${theme.vars.colors.background.surface};
+      border-radius: ${theme.vars.borderRadius.medium};
+      font-size: 1rem;
+      font-family: ${theme.vars.typography.fontFamily};
+      color: ${theme.vars.colors.text.primary};
+      margin-bottom: calc(${theme.vars.spacing.unit} / 2);
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    `;
+	const listItemText = css`
+      flex: 1;
+      word-break: break-word;
+    `;
+	const removeButton = css`
+      padding: calc(${theme.vars.spacing.unit} / 2);
+      min-width: auto;
+      color: ${theme.vars.colors.error.main};
+      background: transparent;
+      border: none;
+      border-radius: ${theme.vars.borderRadius.small};
+      cursor: ${disabled ? "not-allowed" : "pointer"};
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &:hover:not(:disabled) {
+        background-color: ${theme.vars.colors.action.hover};
+      }
+
+      &:disabled {
+        opacity: 0.6;
+      }
+    `;
+	return {
+		container,
+		icon: css`
+      width: 16px;
+      height: 16px;
+      stroke: currentColor;
+      stroke-width: 2;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      fill: none;
+    `,
+		inputRow,
+		inputWrapper,
+		listContainer,
+		listItem,
+		listItemText,
+		plusIcon,
+		removeButton
+	};
+}, [
+	theme,
+	colorScheme,
+	disabled,
+	hasError,
+	canAddMore,
+	canRemove
+]);
+var MultiInput_styles_default = useStyles;
+
+//#endregion
+export { MultiInput_styles_default as default };
+//# sourceMappingURL=MultiInput.styles.js.map

package/dist/components/primitives/MultiInput/MultiInput.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiInput.styles.js","names":["container: string","inputRow: string","inputWrapper: string","plusIcon: string","listContainer: string","listItem: string","listItemText: string","removeButton: string"],"sources":["../../../../src/components/primitives/MultiInput/MultiInput.styles.ts"],"sourcesContent":["/**\n * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {css} from '@emotion/css';\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\n\nexport type MultiInputType = 'text' | 'email' | 'tel' | 'url' | 'password' | 'date' | 'boolean';\nexport type MultiInputFieldType = 'STRING' | 'DATE_TIME' | 'BOOLEAN';\n\n/**\n * Creates styles for the MultiInput component using BEM methodology\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @param disabled - Whether the component is disabled\n * @param hasError - Whether the component has an error\n * @param canAddMore - Whether more items can be added\n * @param canRemove - Whether items can be removed\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (\n  theme: Theme,\n  colorScheme: string,\n  disabled: boolean,\n  hasError: boolean,\n  canAddMore: boolean,\n  canRemove: boolean,\n): Record<string, string> =>\n  useMemo(() => {\n    const container: string = css`\n      display: flex;\n      flex-direction: column;\n      gap: ${theme.vars.spacing.unit};\n    `;\n\n    const inputRow: string = css`\n      display: flex;\n      align-items: center;\n      gap: ${theme.vars.spacing.unit};\n      position: relative;\n    `;\n\n    const inputWrapper: string = css`\n      flex: 1;\n    `;\n\n    const plusIcon: string = css`\n      background: ${theme.vars.colors.secondary.main};\n      border-radius: 50%;\n      outline: 4px ${theme.vars.colors.secondary.main} auto;\n      color: ${theme.vars.colors.secondary.contrastText};\n    `;\n\n    const listContainer: string = css`\n      display: flex;\n      flex-direction: column;\n      gap: 0;\n    `;\n\n    const listItem: string = css`\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: ${theme.vars.spacing.unit} calc(${theme.vars.spacing.unit} * 1.5);\n      background-color: ${theme.vars.colors.background.surface};\n      border-radius: ${theme.vars.borderRadius.medium};\n      font-size: 1rem;\n      font-family: ${theme.vars.typography.fontFamily};\n      color: ${theme.vars.colors.text.primary};\n      margin-bottom: calc(${theme.vars.spacing.unit} / 2);\n\n      &:last-child {\n        margin-bottom: 0;\n      }\n    `;\n\n    const listItemText: string = css`\n      flex: 1;\n      word-break: break-word;\n    `;\n\n    const removeButton: string = css`\n      padding: calc(${theme.vars.spacing.unit} / 2);\n      min-width: auto;\n      color: ${theme.vars.colors.error.main};\n      background: transparent;\n      border: none;\n      border-radius: ${theme.vars.borderRadius.small};\n      cursor: ${disabled ? 'not-allowed' : 'pointer'};\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      &:hover:not(:disabled) {\n        background-color: ${theme.vars.colors.action.hover};\n      }\n\n      &:disabled {\n        opacity: 0.6;\n      }\n    `;\n\n    const icon: string = css`\n      width: 16px;\n      height: 16px;\n      stroke: currentColor;\n      stroke-width: 2;\n      stroke-linecap: round;\n      stroke-linejoin: round;\n      fill: none;\n    `;\n\n    return {\n      container,\n      icon,\n      inputRow,\n      inputWrapper,\n      listContainer,\n      listItem,\n      listItemText,\n      plusIcon,\n      removeButton,\n    };\n  }, [theme, colorScheme, disabled, hasError, canAddMore, canRemove]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;;AAmCA,MAAM,aACJ,OACA,aACA,UACA,UACA,YACA,cAEA,cAAc;CACZ,MAAMA,YAAoB,GAAG;;;aAGpB,MAAM,KAAK,QAAQ,KAAK;;CAGjC,MAAMC,WAAmB,GAAG;;;aAGnB,MAAM,KAAK,QAAQ,KAAK;;;CAIjC,MAAMC,eAAuB,GAAG;;;CAIhC,MAAMC,WAAmB,GAAG;oBACZ,MAAM,KAAK,OAAO,UAAU,KAAK;;qBAEhC,MAAM,KAAK,OAAO,UAAU,KAAK;eACvC,MAAM,KAAK,OAAO,UAAU,aAAa;;CAGpD,MAAMC,gBAAwB,GAAG;;;;;CAMjC,MAAMC,WAAmB,GAAG;;;;iBAIf,MAAM,KAAK,QAAQ,KAAK,QAAQ,MAAM,KAAK,QAAQ,KAAK;0BAC/C,MAAM,KAAK,OAAO,WAAW,QAAQ;uBACxC,MAAM,KAAK,aAAa,OAAO;;qBAEjC,MAAM,KAAK,WAAW,WAAW;eACvC,MAAM,KAAK,OAAO,KAAK,QAAQ;4BAClB,MAAM,KAAK,QAAQ,KAAK;;;;;;CAOhD,MAAMC,eAAuB,GAAG;;;;CAKhC,MAAMC,eAAuB,GAAG;sBACd,MAAM,KAAK,QAAQ,KAAK;;eAE/B,MAAM,KAAK,OAAO,MAAM,KAAK;;;uBAGrB,MAAM,KAAK,aAAa,MAAM;gBACrC,WAAW,gBAAgB,UAAU;;;;;;4BAMzB,MAAM,KAAK,OAAO,OAAO,MAAM;;;;;;;AAkBvD,QAAO;EACL;EACA,MAZmB,GAAG;;;;;;;;;EAatB;EACA;EACA;EACA;EACA;EACA;EACA;EACD;GACA;CAAC;CAAO;CAAa;CAAU;CAAU;CAAY;CAAU,CAAC;AAErE,gCAAe"}

package/dist/components/primitives/OtpField/OtpField.js

@@ -0,0 +1,124 @@
+import useTheme_default from "../../../contexts/Theme/useTheme.js";
+import FormControl_default from "../FormControl/FormControl.js";
+import InputLabel_default from "../InputLabel/InputLabel.js";
+import OtpField_styles_default from "./OtpField.styles.js";
+import { bem, withVendorCSSClassPrefix } from "@thunderid/browser";
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@emotion/css";
+
+//#region src/components/primitives/OtpField/OtpField.tsx
+const OtpField = ({ label, error, className, required, disabled, helperText, length = 6, value = "", onChange, onComplete, type = "text", placeholder = "", style = {}, autoFocus = false, pattern }) => {
+	const { theme, colorScheme } = useTheme_default();
+	const styles = OtpField_styles_default(theme, colorScheme, !!disabled, !!error, length);
+	const [otp, setOtp] = useState(Array(length).fill(""));
+	const inputRefs = useRef([]);
+	useEffect(() => {
+		inputRefs.current = inputRefs.current.slice(0, length);
+	}, [length]);
+	useEffect(() => {
+		if (value) {
+			const newOtp = value.split("").slice(0, length);
+			while (newOtp.length < length) newOtp.push("");
+			setOtp(newOtp);
+		} else setOtp(Array(length).fill(""));
+	}, [value, length]);
+	useEffect(() => {
+		if (autoFocus && inputRefs.current[0]) inputRefs.current[0].focus();
+	}, [autoFocus]);
+	const handleChange = (index, event) => {
+		const newValue = event.target.value;
+		if (newValue.length > 1) return;
+		if (type === "number" && newValue && !/^\d$/.test(newValue)) return;
+		if (pattern && newValue && !new RegExp(pattern).test(newValue)) return;
+		const newOtp = [...otp];
+		newOtp[index] = newValue;
+		setOtp(newOtp);
+		const otpValue = newOtp.join("");
+		onChange?.({ target: { value: otpValue } });
+		if (newValue && index < length - 1) inputRefs.current[index + 1]?.focus();
+		if (newOtp.every((digit) => digit !== "") && onComplete) onComplete(otpValue);
+	};
+	const handleKeyDown = (index, event) => {
+		if (event.key === "Backspace") {
+			if (!otp[index] && index > 0) {
+				const newOtp = [...otp];
+				newOtp[index - 1] = "";
+				setOtp(newOtp);
+				inputRefs.current[index - 1]?.focus();
+				onChange?.({ target: { value: newOtp.join("") } });
+			} else if (otp[index]) {
+				const newOtp = [...otp];
+				newOtp[index] = "";
+				setOtp(newOtp);
+				onChange?.({ target: { value: newOtp.join("") } });
+			}
+		} else if (event.key === "ArrowLeft" && index > 0) inputRefs.current[index - 1]?.focus();
+		else if (event.key === "ArrowRight" && index < length - 1) inputRefs.current[index + 1]?.focus();
+		else if (event.key === "Enter") {
+			event.preventDefault();
+			if (otp.every((digit) => digit !== "") && onComplete) onComplete(otp.join(""));
+		}
+	};
+	const handlePaste = (event) => {
+		event.preventDefault();
+		const pastedData = event.clipboardData.getData("text").slice(0, length);
+		let validData = "";
+		Array.from(pastedData).forEach((char) => {
+			if (type === "number" && !/^\d$/.test(char)) return;
+			if (pattern && !new RegExp(pattern).test(char)) return;
+			validData += char;
+		});
+		const newOtp = Array(length).fill("");
+		for (let i = 0; i < Math.min(validData.length, length); i += 1) newOtp[i] = validData[i];
+		setOtp(newOtp);
+		onChange?.({ target: { value: newOtp.join("") } });
+		const nextEmptyIndex = newOtp.findIndex((digit) => digit === "");
+		const focusIndex = nextEmptyIndex !== -1 ? nextEmptyIndex : length - 1;
+		inputRefs.current[focusIndex]?.focus();
+		if (newOtp.every((digit) => digit !== "") && onComplete) onComplete(newOtp.join(""));
+	};
+	return /* @__PURE__ */ jsxs(FormControl_default, {
+		error,
+		helperText,
+		className: cx(withVendorCSSClassPrefix(bem("otp-field")), className),
+		helperTextAlign: "center",
+		style,
+		children: [label && /* @__PURE__ */ jsx(InputLabel_default, {
+			required,
+			error: !!error,
+			children: label
+		}), /* @__PURE__ */ jsx("div", {
+			className: cx(withVendorCSSClassPrefix(bem("otp-field", "input-container")), styles["inputContainer"]),
+			children: Array.from({ length }, (_, index) => /* @__PURE__ */ jsx("input", {
+				ref: (el) => {
+					if (el) inputRefs.current[index] = el;
+				},
+				type: type === "password" ? "password" : "text",
+				inputMode: type === "number" ? "numeric" : "text",
+				value: otp[index] || "",
+				onChange: (event) => handleChange(index, event),
+				onKeyDown: (event) => handleKeyDown(index, event),
+				onPaste: handlePaste,
+				className: cx(withVendorCSSClassPrefix(bem("otp-field", "input")), styles["input"], {
+					[withVendorCSSClassPrefix(bem("otp-field", "input", "error"))]: !!error,
+					[styles["inputError"]]: !!error,
+					[withVendorCSSClassPrefix(bem("otp-field", "input", "disabled"))]: !!disabled,
+					[styles["inputDisabled"]]: !!disabled
+				}),
+				maxLength: 1,
+				placeholder,
+				disabled,
+				"aria-label": `${label || "OTP"} digit ${index + 1}`,
+				"aria-invalid": !!error,
+				"aria-required": required,
+				autoComplete: "one-time-code"
+			}, index))
+		})]
+	});
+};
+var OtpField_default = OtpField;
+
+//#endregion
+export { OtpField_default as default };
+//# sourceMappingURL=OtpField.js.map

package/dist/components/primitives/OtpField/OtpField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OtpField.js","names":["OtpField: FC<OtpInputProps>","useTheme","styles: Record<string, string>","useStyles","inputRefs: MutableRefObject<HTMLInputElement[]>","newOtp: string[]","newValue: string","otpValue: string","pastedData: string","nextEmptyIndex: number","focusIndex: number","FormControl","InputLabel"],"sources":["../../../../src/components/primitives/OtpField/OtpField.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {cx} from '@emotion/css';\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {\n  ClipboardEvent,\n  FC,\n  KeyboardEvent,\n  ChangeEvent,\n  MutableRefObject,\n  useRef,\n  useEffect,\n  useState,\n  CSSProperties,\n} from 'react';\nimport useStyles from './OtpField.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport FormControl from '../FormControl/FormControl';\nimport InputLabel from '../InputLabel/InputLabel';\n\nexport type OtpFieldType = 'text' | 'number' | 'password';\n\nexport interface OtpInputProps {\n  /**\n   * Auto focus the first input on mount\n   */\n  autoFocus?: boolean;\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n  /**\n   * Whether the field is disabled\n   */\n  disabled?: boolean;\n  /**\n   * Error message to display below the OTP input\n   */\n  error?: string;\n  /**\n   * Helper text to display below the OTP input\n   */\n  helperText?: string;\n  /**\n   * Label text to display above the OTP input\n   */\n  label?: string;\n  /**\n   * Number of OTP input fields\n   */\n  length?: number;\n  /**\n   * Callback function called when OTP value changes\n   */\n  onChange?: (event: {target: {value: string}}) => void;\n  /**\n   * Callback function called when OTP input is complete\n   */\n  onComplete?: (value: string) => void;\n  /**\n   * Pattern for numeric input validation\n   */\n  pattern?: string;\n  /**\n   * Placeholder character for each input field\n   */\n  placeholder?: string;\n  /**\n   * Whether the field is required\n   */\n  required?: boolean;\n  /**\n   * Custom container style\n   */\n  style?: CSSProperties;\n  /**\n   * Type of input (text, number, password)\n   */\n  type?: OtpFieldType;\n  /**\n   * Current OTP value\n   */\n  value?: string;\n}\n\nconst OtpField: FC<OtpInputProps> = ({\n  label,\n  error,\n  className,\n  required,\n  disabled,\n  helperText,\n  length = 6,\n  value = '',\n  onChange,\n  onComplete,\n  type = 'text',\n  placeholder = '',\n  style = {},\n  autoFocus = false,\n  pattern,\n}: OtpInputProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const styles: Record<string, string> = useStyles(theme, colorScheme, !!disabled, !!error, length);\n  const [otp, setOtp] = useState<string[]>(Array(length).fill(''));\n  const inputRefs: MutableRefObject<HTMLInputElement[]> = useRef<HTMLInputElement[]>([]);\n\n  useEffect(() => {\n    inputRefs.current = inputRefs.current.slice(0, length);\n  }, [length]);\n\n  useEffect(() => {\n    if (value) {\n      const newOtp: string[] = value.split('').slice(0, length);\n      while (newOtp.length < length) {\n        newOtp.push('');\n      }\n      setOtp(newOtp);\n    } else {\n      setOtp(Array(length).fill(''));\n    }\n  }, [value, length]);\n\n  useEffect(() => {\n    if (autoFocus && inputRefs.current[0]) {\n      inputRefs.current[0].focus();\n    }\n  }, [autoFocus]);\n\n  const handleChange = (index: number, event: ChangeEvent<HTMLInputElement>): void => {\n    const newValue: string = event.target.value;\n\n    if (newValue.length > 1) return;\n\n    if (type === 'number' && newValue && !/^\\d$/.test(newValue)) return;\n\n    if (pattern && newValue && !new RegExp(pattern).test(newValue)) return;\n\n    const newOtp: string[] = [...otp];\n    newOtp[index] = newValue;\n    setOtp(newOtp);\n\n    const otpValue: string = newOtp.join('');\n\n    onChange?.({target: {value: otpValue}});\n\n    if (newValue && index < length - 1) {\n      inputRefs.current[index + 1]?.focus();\n    }\n\n    if (newOtp.every((digit: string) => digit !== '') && onComplete) {\n      onComplete(otpValue);\n    }\n  };\n\n  const handleKeyDown = (index: number, event: KeyboardEvent<HTMLInputElement>): void => {\n    if (event.key === 'Backspace') {\n      if (!otp[index] && index > 0) {\n        const newOtp: string[] = [...otp];\n\n        newOtp[index - 1] = '';\n        setOtp(newOtp);\n        inputRefs.current[index - 1]?.focus();\n        onChange?.({target: {value: newOtp.join('')}});\n      } else if (otp[index]) {\n        const newOtp: string[] = [...otp];\n\n        newOtp[index] = '';\n        setOtp(newOtp);\n        onChange?.({target: {value: newOtp.join('')}});\n      }\n    } else if (event.key === 'ArrowLeft' && index > 0) {\n      inputRefs.current[index - 1]?.focus();\n    } else if (event.key === 'ArrowRight' && index < length - 1) {\n      inputRefs.current[index + 1]?.focus();\n    } else if (event.key === 'Enter') {\n      event.preventDefault();\n\n      if (otp.every((digit: string) => digit !== '') && onComplete) {\n        onComplete(otp.join(''));\n      }\n    }\n  };\n\n  const handlePaste = (event: ClipboardEvent<HTMLInputElement>): void => {\n    event.preventDefault();\n\n    const pastedData: string = event.clipboardData.getData('text').slice(0, length);\n\n    let validData = '';\n\n    Array.from(pastedData).forEach((char: string) => {\n      if (type === 'number' && !/^\\d$/.test(char)) return;\n      if (pattern && !new RegExp(pattern).test(char)) return;\n      validData += char;\n    });\n\n    const newOtp: string[] = Array(length).fill('');\n\n    for (let i = 0; i < Math.min(validData.length, length); i += 1) {\n      newOtp[i] = validData[i];\n    }\n\n    setOtp(newOtp);\n    onChange?.({target: {value: newOtp.join('')}});\n\n    const nextEmptyIndex: number = newOtp.findIndex((digit: string) => digit === '');\n    const focusIndex: number = nextEmptyIndex !== -1 ? nextEmptyIndex : length - 1;\n\n    inputRefs.current[focusIndex]?.focus();\n\n    if (newOtp.every((digit: string) => digit !== '') && onComplete) {\n      onComplete(newOtp.join(''));\n    }\n  };\n\n  return (\n    <FormControl\n      error={error}\n      helperText={helperText}\n      className={cx(withVendorCSSClassPrefix(bem('otp-field')), className)}\n      helperTextAlign=\"center\"\n      style={style}\n    >\n      {label && (\n        <InputLabel required={required} error={!!error}>\n          {label}\n        </InputLabel>\n      )}\n      <div className={cx(withVendorCSSClassPrefix(bem('otp-field', 'input-container')), styles['inputContainer'])}>\n        {Array.from({length}, (_: unknown, index: number) => (\n          <input\n            key={index}\n            ref={(el: HTMLInputElement | null): void => {\n              if (el) inputRefs.current[index] = el;\n            }}\n            type={type === 'password' ? 'password' : 'text'}\n            inputMode={type === 'number' ? 'numeric' : 'text'}\n            value={otp[index] || ''}\n            onChange={(event: ChangeEvent<HTMLInputElement>): void => handleChange(index, event)}\n            onKeyDown={(event: KeyboardEvent<HTMLInputElement>): void => handleKeyDown(index, event)}\n            onPaste={handlePaste}\n            className={cx(withVendorCSSClassPrefix(bem('otp-field', 'input')), styles['input'], {\n              [withVendorCSSClassPrefix(bem('otp-field', 'input', 'error'))]: !!error,\n              [styles['inputError']]: !!error,\n              [withVendorCSSClassPrefix(bem('otp-field', 'input', 'disabled'))]: !!disabled,\n              [styles['inputDisabled']]: !!disabled,\n            })}\n            maxLength={1}\n            placeholder={placeholder}\n            disabled={disabled}\n            aria-label={`${label || 'OTP'} digit ${index + 1}`}\n            aria-invalid={!!error}\n            aria-required={required}\n            autoComplete=\"one-time-code\"\n          />\n        ))}\n      </div>\n    </FormControl>\n  );\n};\n\nexport default OtpField;\n"],"mappings":"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"}

package/dist/components/primitives/OtpField/OtpField.styles.js

@@ -0,0 +1,82 @@
+import { useMemo } from "react";
+import { css } from "@emotion/css";
+
+//#region src/components/primitives/OtpField/OtpField.styles.ts
+/**
+* Creates styles for the OtpField component using BEM methodology
+* @param theme - The theme object containing design tokens
+* @param colorScheme - The current color scheme (used for memoization)
+* @param disabled - Whether the component is disabled
+* @param hasError - Whether the component has an error
+* @param length - Number of OTP input fields
+* @returns Object containing CSS class names for component styling
+*/
+const useStyles = (theme, colorScheme, disabled, hasError, length) => useMemo(() => {
+	const inputContainer = css`
+      display: flex;
+      gap: ${theme.vars.spacing.unit};
+      justify-content: space-between;
+      align-items: center;
+      flex-wrap: wrap;
+    `;
+	const input = css`
+      width: calc(${theme.vars.spacing.unit} * 6);
+      height: calc(${theme.vars.spacing.unit} * 6);
+      text-align: center;
+      font-size: ${theme.vars.typography.fontSizes.xl};
+      font-family: ${theme.vars.typography.fontFamily};
+      font-weight: 500;
+      border: 2px solid ${hasError ? theme.vars.colors.error.main : theme.vars.colors.border};
+      border-radius: ${theme.vars.components?.Field?.root?.borderRadius || theme.vars.borderRadius.medium};
+      color: ${theme.vars.colors.text.primary};
+      background-color: ${disabled ? theme.vars.colors.background.disabled : theme.vars.colors.background.surface};
+      outline: none;
+      transition:
+        border-color 0.2s ease,
+        box-shadow 0.2s ease;
+
+      &:focus {
+        border-color: ${hasError ? theme.vars.colors.error.main : theme.vars.colors.primary.main};
+        box-shadow: 0 0 0 2px ${hasError ? `${theme.vars.colors.error.main}20` : `${theme.vars.colors.primary.main}20`};
+      }
+
+      &:disabled {
+        cursor: not-allowed;
+        opacity: 0.6;
+      }
+
+      &::placeholder {
+        color: ${theme.vars.colors.text.secondary};
+        opacity: 0.7;
+      }
+    `;
+	const inputError = css`
+      border-color: ${theme.vars.colors.error.main};
+
+      &:focus {
+        border-color: ${theme.vars.colors.error.main};
+        box-shadow: 0 0 0 2px ${theme.vars.colors.error.main}20;
+      }
+    `;
+	return {
+		input,
+		inputContainer,
+		inputDisabled: css`
+      background-color: ${theme.vars.colors.background.disabled};
+      cursor: not-allowed;
+      opacity: 0.6;
+    `,
+		inputError
+	};
+}, [
+	theme,
+	colorScheme,
+	disabled,
+	hasError,
+	length
+]);
+var OtpField_styles_default = useStyles;
+
+//#endregion
+export { OtpField_styles_default as default };
+//# sourceMappingURL=OtpField.styles.js.map

package/dist/components/primitives/OtpField/OtpField.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OtpField.styles.js","names":["inputContainer: string","input: string","inputError: string"],"sources":["../../../../src/components/primitives/OtpField/OtpField.styles.ts"],"sourcesContent":["/**\n * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {css} from '@emotion/css';\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\n\nexport type OtpFieldType = 'text' | 'number' | 'password';\n\n/**\n * Creates styles for the OtpField component using BEM methodology\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @param disabled - Whether the component is disabled\n * @param hasError - Whether the component has an error\n * @param length - Number of OTP input fields\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (\n  theme: Theme,\n  colorScheme: string,\n  disabled: boolean,\n  hasError: boolean,\n  length: number,\n): Record<string, string> =>\n  useMemo(() => {\n    const inputContainer: string = css`\n      display: flex;\n      gap: ${theme.vars.spacing.unit};\n      justify-content: space-between;\n      align-items: center;\n      flex-wrap: wrap;\n    `;\n\n    const input: string = css`\n      width: calc(${theme.vars.spacing.unit} * 6);\n      height: calc(${theme.vars.spacing.unit} * 6);\n      text-align: center;\n      font-size: ${theme.vars.typography.fontSizes.xl};\n      font-family: ${theme.vars.typography.fontFamily};\n      font-weight: 500;\n      border: 2px solid ${hasError ? theme.vars.colors.error.main : theme.vars.colors.border};\n      border-radius: ${theme.vars.components?.Field?.root?.borderRadius || theme.vars.borderRadius.medium};\n      color: ${theme.vars.colors.text.primary};\n      background-color: ${disabled ? theme.vars.colors.background.disabled : theme.vars.colors.background.surface};\n      outline: none;\n      transition:\n        border-color 0.2s ease,\n        box-shadow 0.2s ease;\n\n      &:focus {\n        border-color: ${hasError ? theme.vars.colors.error.main : theme.vars.colors.primary.main};\n        box-shadow: 0 0 0 2px ${hasError ? `${theme.vars.colors.error.main}20` : `${theme.vars.colors.primary.main}20`};\n      }\n\n      &:disabled {\n        cursor: not-allowed;\n        opacity: 0.6;\n      }\n\n      &::placeholder {\n        color: ${theme.vars.colors.text.secondary};\n        opacity: 0.7;\n      }\n    `;\n\n    const inputError: string = css`\n      border-color: ${theme.vars.colors.error.main};\n\n      &:focus {\n        border-color: ${theme.vars.colors.error.main};\n        box-shadow: 0 0 0 2px ${theme.vars.colors.error.main}20;\n      }\n    `;\n\n    const inputDisabled: string = css`\n      background-color: ${theme.vars.colors.background.disabled};\n      cursor: not-allowed;\n      opacity: 0.6;\n    `;\n\n    return {\n      input,\n      inputContainer,\n      inputDisabled,\n      inputError,\n    };\n  }, [theme, colorScheme, disabled, hasError, length]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;AAiCA,MAAM,aACJ,OACA,aACA,UACA,UACA,WAEA,cAAc;CACZ,MAAMA,iBAAyB,GAAG;;aAEzB,MAAM,KAAK,QAAQ,KAAK;;;;;CAMjC,MAAMC,QAAgB,GAAG;oBACT,MAAM,KAAK,QAAQ,KAAK;qBACvB,MAAM,KAAK,QAAQ,KAAK;;mBAE1B,MAAM,KAAK,WAAW,UAAU,GAAG;qBACjC,MAAM,KAAK,WAAW,WAAW;;0BAE5B,WAAW,MAAM,KAAK,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO,OAAO;uBACtE,MAAM,KAAK,YAAY,OAAO,MAAM,gBAAgB,MAAM,KAAK,aAAa,OAAO;eAC3F,MAAM,KAAK,OAAO,KAAK,QAAQ;0BACpB,WAAW,MAAM,KAAK,OAAO,WAAW,WAAW,MAAM,KAAK,OAAO,WAAW,QAAQ;;;;;;;wBAO1F,WAAW,MAAM,KAAK,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO,QAAQ,KAAK;gCACjE,WAAW,GAAG,MAAM,KAAK,OAAO,MAAM,KAAK,MAAM,GAAG,MAAM,KAAK,OAAO,QAAQ,KAAK,IAAI;;;;;;;;;iBAStG,MAAM,KAAK,OAAO,KAAK,UAAU;;;;CAK9C,MAAMC,aAAqB,GAAG;sBACZ,MAAM,KAAK,OAAO,MAAM,KAAK;;;wBAG3B,MAAM,KAAK,OAAO,MAAM,KAAK;gCACrB,MAAM,KAAK,OAAO,MAAM,KAAK;;;AAUzD,QAAO;EACL;EACA;EACA,eAT4B,GAAG;0BACX,MAAM,KAAK,OAAO,WAAW,SAAS;;;;EAS1D;EACD;GACA;CAAC;CAAO;CAAa;CAAU;CAAU;CAAO,CAAC;AAEtD,8BAAe"}

package/dist/components/primitives/PasswordField/PasswordField.js

@@ -0,0 +1,44 @@
+import useTheme_default from "../../../contexts/Theme/useTheme.js";
+import PasswordField_styles_default from "./PasswordField.styles.js";
+import Eye_default from "../Icons/Eye.js";
+import EyeOff_default from "../Icons/EyeOff.js";
+import TextField_default from "../TextField/TextField.js";
+import { bem, withVendorCSSClassPrefix } from "@thunderid/browser";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { cx } from "@emotion/css";
+
+//#region src/components/primitives/PasswordField/PasswordField.tsx
+/**
+* Password field component with show/hide toggle functionality.
+* This component extends TextField and adds password visibility toggle functionality.
+*/
+const PasswordField = ({ onChange, className, disabled, error,...textFieldProps }) => {
+	const { theme, colorScheme } = useTheme_default();
+	const [showPassword, setShowPassword] = useState(false);
+	const styles = PasswordField_styles_default(theme, colorScheme, showPassword, !!disabled, !!error);
+	const togglePasswordVisibility = () => {
+		if (!disabled) setShowPassword(!showPassword);
+	};
+	const IconComponent = showPassword ? EyeOff_default : Eye_default;
+	return /* @__PURE__ */ jsx(TextField_default, {
+		...textFieldProps,
+		className: cx(withVendorCSSClassPrefix(bem("password-field")), className),
+		type: showPassword ? "text" : "password",
+		onChange: (e) => onChange(e.target.value),
+		autoComplete: "current-password",
+		disabled,
+		error,
+		endIcon: /* @__PURE__ */ jsx(IconComponent, {
+			width: 16,
+			height: 16,
+			className: cx(withVendorCSSClassPrefix(bem("password-field", "toggle-icon")), styles["toggleIcon"], showPassword ? styles["visibleIcon"] : styles["hiddenIcon"])
+		}),
+		onEndIconClick: togglePasswordVisibility
+	});
+};
+var PasswordField_default = PasswordField;
+
+//#endregion
+export { PasswordField_default as default };
+//# sourceMappingURL=PasswordField.js.map