@thunderid/react 0.1.0 → 0.2.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordField.js","names":["PasswordField: FC<PasswordFieldProps>","useTheme","styles: Record<string, string>","useStyles","IconComponent: FC<SVGProps<SVGSVGElement>>","EyeOff","Eye","TextField"],"sources":["../../../../src/components/primitives/PasswordField/PasswordField.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 {ChangeEvent, FC, SVGProps, useState} from 'react';\nimport useStyles from './PasswordField.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport Eye from '../Icons/Eye';\nimport EyeOff from '../Icons/EyeOff';\nimport TextField, {TextFieldProps} from '../TextField/TextField';\n\nexport interface PasswordFieldProps extends Omit<TextFieldProps, 'type' | 'endIcon' | 'onEndIconClick' | 'onChange'> {\n  /**\n   * Callback function when the field value changes\n   */\n  onChange: (value: string) => void;\n}\n\n/**\n * Password field component with show/hide toggle functionality.\n * This component extends TextField and adds password visibility toggle functionality.\n */\nconst PasswordField: FC<PasswordFieldProps> = ({\n  onChange,\n  className,\n  disabled,\n  error,\n  ...textFieldProps\n}: PasswordFieldProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const [showPassword, setShowPassword] = useState(false);\n  const styles: Record<string, string> = useStyles(theme, colorScheme, showPassword, !!disabled, !!error);\n\n  const togglePasswordVisibility = (): void => {\n    if (!disabled) {\n      setShowPassword(!showPassword);\n    }\n  };\n\n  const IconComponent: FC<SVGProps<SVGSVGElement>> = showPassword ? EyeOff : Eye;\n\n  return (\n    <TextField\n      {...textFieldProps}\n      className={cx(withVendorCSSClassPrefix(bem('password-field')), className)}\n      type={showPassword ? 'text' : 'password'}\n      onChange={(e: ChangeEvent<HTMLInputElement>): void => onChange(e.target.value)}\n      autoComplete=\"current-password\"\n      disabled={disabled}\n      error={error}\n      endIcon={\n        <IconComponent\n          width={16}\n          height={16}\n          className={cx(\n            withVendorCSSClassPrefix(bem('password-field', 'toggle-icon')),\n            styles['toggleIcon'],\n            showPassword ? styles['visibleIcon'] : styles['hiddenIcon'],\n          )}\n        />\n      }\n      onEndIconClick={togglePasswordVisibility}\n    />\n  );\n};\n\nexport default PasswordField;\n"],"mappings":";;;;;;;;;;;;;;;AAsCA,MAAMA,iBAAyC,EAC7C,UACA,WACA,UACA,MACA,GAAG,qBACqB;CACxB,MAAM,EAAC,OAAO,gBAA4CC,kBAAU;CACpE,MAAM,CAAC,cAAc,mBAAmB,SAAS,MAAM;CACvD,MAAMC,SAAiCC,6BAAU,OAAO,aAAa,cAAc,CAAC,CAAC,UAAU,CAAC,CAAC,MAAM;CAEvG,MAAM,iCAAuC;AAC3C,MAAI,CAAC,SACH,iBAAgB,CAAC,aAAa;;CAIlC,MAAMC,gBAA6C,eAAeC,iBAASC;AAE3E,QACE,oBAACC;EACC,GAAI;EACJ,WAAW,GAAG,yBAAyB,IAAI,iBAAiB,CAAC,EAAE,UAAU;EACzE,MAAM,eAAe,SAAS;EAC9B,WAAW,MAA2C,SAAS,EAAE,OAAO,MAAM;EAC9E,cAAa;EACH;EACH;EACP,SACE,oBAAC;GACC,OAAO;GACP,QAAQ;GACR,WAAW,GACT,yBAAyB,IAAI,kBAAkB,cAAc,CAAC,EAC9D,OAAO,eACP,eAAe,OAAO,iBAAiB,OAAO,cAC/C;IACD;EAEJ,gBAAgB;GAChB;;AAIN,4BAAe"}

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

@@ -0,0 +1,46 @@
+import { useMemo } from "react";
+import { css } from "@emotion/css";
+
+//#region src/components/primitives/PasswordField/PasswordField.styles.ts
+/**
+* Creates styles for the PasswordField component using BEM methodology
+* @param theme - The theme object containing design tokens
+* @param colorScheme - The current color scheme (used for memoization)
+* @param showPassword - Whether the password is currently visible
+* @param disabled - Whether the component is disabled
+* @param hasError - Whether the component has an error
+* @returns Object containing CSS class names for component styling
+*/
+const useStyles = (theme, colorScheme, showPassword, disabled, hasError) => useMemo(() => {
+	const toggleIcon = css`
+      cursor: ${disabled ? "not-allowed" : "pointer"};
+      color: ${theme.vars.colors.text.secondary};
+      opacity: ${disabled ? .6 : 1};
+      transition: color 0.2s ease;
+
+      &:hover {
+        color: ${!disabled ? theme.vars.colors.text.primary : theme.vars.colors.text.secondary};
+      }
+    `;
+	const visibleIcon = css`
+      color: ${theme.vars.colors.primary.main};
+    `;
+	return {
+		hiddenIcon: css`
+      color: ${theme.vars.colors.text.secondary};
+    `,
+		toggleIcon,
+		visibleIcon
+	};
+}, [
+	theme,
+	colorScheme,
+	showPassword,
+	disabled,
+	hasError
+]);
+var PasswordField_styles_default = useStyles;
+
+//#endregion
+export { PasswordField_styles_default as default };
+//# sourceMappingURL=PasswordField.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordField.styles.js","names":["toggleIcon: string","visibleIcon: string"],"sources":["../../../../src/components/primitives/PasswordField/PasswordField.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\n/**\n * Creates styles for the PasswordField 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 showPassword - Whether the password is currently visible\n * @param disabled - Whether the component is disabled\n * @param hasError - Whether the component has an error\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (\n  theme: Theme,\n  colorScheme: string,\n  showPassword: boolean,\n  disabled: boolean,\n  hasError: boolean,\n): Record<string, string> =>\n  useMemo(() => {\n    const toggleIcon: string = css`\n      cursor: ${disabled ? 'not-allowed' : 'pointer'};\n      color: ${theme.vars.colors.text.secondary};\n      opacity: ${disabled ? 0.6 : 1};\n      transition: color 0.2s ease;\n\n      &:hover {\n        color: ${!disabled ? theme.vars.colors.text.primary : theme.vars.colors.text.secondary};\n      }\n    `;\n\n    const visibleIcon: string = css`\n      color: ${theme.vars.colors.primary.main};\n    `;\n\n    const hiddenIcon: string = css`\n      color: ${theme.vars.colors.text.secondary};\n    `;\n\n    return {\n      hiddenIcon,\n      toggleIcon,\n      visibleIcon,\n    };\n  }, [theme, colorScheme, showPassword, disabled, hasError]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;AA+BA,MAAM,aACJ,OACA,aACA,cACA,UACA,aAEA,cAAc;CACZ,MAAMA,aAAqB,GAAG;gBAClB,WAAW,gBAAgB,UAAU;eACtC,MAAM,KAAK,OAAO,KAAK,UAAU;iBAC/B,WAAW,KAAM,EAAE;;;;iBAInB,CAAC,WAAW,MAAM,KAAK,OAAO,KAAK,UAAU,MAAM,KAAK,OAAO,KAAK,UAAU;;;CAI3F,MAAMC,cAAsB,GAAG;eACpB,MAAM,KAAK,OAAO,QAAQ,KAAK;;AAO1C,QAAO;EACL,YALyB,GAAG;eACnB,MAAM,KAAK,OAAO,KAAK,UAAU;;EAK1C;EACA;EACD;GACA;CAAC;CAAO;CAAa;CAAc;CAAU;CAAS,CAAC;AAE5D,mCAAe"}

package/dist/components/primitives/Select/Select.js

@@ -0,0 +1,46 @@
+import useTheme_default from "../../../contexts/Theme/useTheme.js";
+import FormControl_default from "../FormControl/FormControl.js";
+import InputLabel_default from "../InputLabel/InputLabel.js";
+import Select_styles_default from "./Select.styles.js";
+import { bem, withVendorCSSClassPrefix } from "@thunderid/browser";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@emotion/css";
+
+//#region src/components/primitives/Select/Select.tsx
+const Select = ({ label, error, className, required, disabled, helperText, placeholder, options, style = {},...rest }) => {
+	const { theme, colorScheme } = useTheme_default();
+	const hasError = !!error;
+	const styles = Select_styles_default(theme, colorScheme, disabled ?? false, hasError);
+	const selectClassName = cx(withVendorCSSClassPrefix(bem("select", "input")), styles["select"], hasError && styles["selectError"], disabled && styles["selectDisabled"]);
+	return /* @__PURE__ */ jsxs(FormControl_default, {
+		error,
+		helperText,
+		className: cx(withVendorCSSClassPrefix(bem("select")), className),
+		style,
+		children: [label && /* @__PURE__ */ jsx(InputLabel_default, {
+			required,
+			error: hasError,
+			children: label
+		}), /* @__PURE__ */ jsxs("select", {
+			className: selectClassName,
+			disabled,
+			"aria-invalid": hasError,
+			"aria-required": required,
+			...rest,
+			children: [placeholder && /* @__PURE__ */ jsx("option", {
+				value: "",
+				disabled: true,
+				children: placeholder
+			}), options.map((option) => /* @__PURE__ */ jsx("option", {
+				value: option.value,
+				className: styles["option"],
+				children: option.label
+			}, option.value))]
+		})]
+	});
+};
+var Select_default = Select;
+
+//#endregion
+export { Select_default as default };
+//# sourceMappingURL=Select.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","names":["Select: FC<SelectProps>","useTheme","styles: Record<string, string>","useStyles","selectClassName: string","FormControl","InputLabel"],"sources":["../../../../src/components/primitives/Select/Select.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 {FC, SelectHTMLAttributes} from 'react';\nimport useStyles from './Select.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport FormControl from '../FormControl/FormControl';\nimport InputLabel from '../InputLabel/InputLabel';\n\nexport interface SelectOption {\n  /**\n   * The text that will be displayed in the select\n   */\n  label: string;\n  /**\n   * The value that will be submitted with the form\n   */\n  value: string;\n}\n\nexport interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'className'> {\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 select\n   */\n  error?: string;\n  /**\n   * Helper text to display below the select\n   */\n  helperText?: string;\n  /**\n   * Label text to display above the select\n   */\n  label?: string;\n  /**\n   * The options to display in the select\n   */\n  options: SelectOption[];\n  /**\n   * Placeholder text for the default/empty option\n   */\n  placeholder?: string;\n  /**\n   * Whether the field is required\n   */\n  required?: boolean;\n}\n\nconst Select: FC<SelectProps> = ({\n  label,\n  error,\n  className,\n  required,\n  disabled,\n  helperText,\n  placeholder,\n  options,\n  style = {},\n  ...rest\n}: SelectProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const hasError = !!error;\n  const styles: Record<string, string> = useStyles(theme, colorScheme, disabled ?? false, hasError);\n\n  const selectClassName: string = cx(\n    withVendorCSSClassPrefix(bem('select', 'input')),\n    styles['select'],\n    hasError && styles['selectError'],\n    disabled && styles['selectDisabled'],\n  );\n\n  return (\n    <FormControl\n      error={error}\n      helperText={helperText}\n      className={cx(withVendorCSSClassPrefix(bem('select')), className)}\n      style={style}\n    >\n      {label && (\n        <InputLabel required={required} error={hasError}>\n          {label}\n        </InputLabel>\n      )}\n      <select\n        className={selectClassName}\n        disabled={disabled}\n        aria-invalid={hasError}\n        aria-required={required}\n        {...rest}\n      >\n        {placeholder && (\n          <option value=\"\" disabled>\n            {placeholder}\n          </option>\n        )}\n        {options.map((option: SelectOption) => (\n          <option key={option.value} value={option.value} className={styles['option']}>\n            {option.label}\n          </option>\n        ))}\n      </select>\n    </FormControl>\n  );\n};\n\nexport default Select;\n"],"mappings":";;;;;;;;;AAwEA,MAAMA,UAA2B,EAC/B,OACA,OACA,WACA,UACA,UACA,YACA,aACA,SACA,QAAQ,EAAE,CACV,GAAG,WACc;CACjB,MAAM,EAAC,OAAO,gBAA4CC,kBAAU;CACpE,MAAM,WAAW,CAAC,CAAC;CACnB,MAAMC,SAAiCC,sBAAU,OAAO,aAAa,YAAY,OAAO,SAAS;CAEjG,MAAMC,kBAA0B,GAC9B,yBAAyB,IAAI,UAAU,QAAQ,CAAC,EAChD,OAAO,WACP,YAAY,OAAO,gBACnB,YAAY,OAAO,kBACpB;AAED,QACE,qBAACC;EACQ;EACK;EACZ,WAAW,GAAG,yBAAyB,IAAI,SAAS,CAAC,EAAE,UAAU;EAC1D;aAEN,SACC,oBAACC;GAAqB;GAAU,OAAO;aACpC;IACU,EAEf,qBAAC;GACC,WAAW;GACD;GACV,gBAAc;GACd,iBAAe;GACf,GAAI;cAEH,eACC,oBAAC;IAAO,OAAM;IAAG;cACd;KACM,EAEV,QAAQ,KAAK,WACZ,oBAAC;IAA0B,OAAO,OAAO;IAAO,WAAW,OAAO;cAC/D,OAAO;MADG,OAAO,MAEX,CACT;IACK;GACG;;AAIlB,qBAAe"}

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

@@ -0,0 +1,95 @@
+import { useMemo } from "react";
+import { css } from "@emotion/css";
+
+//#region src/components/primitives/Select/Select.styles.ts
+/**
+* Creates styles for the Select 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
+* @returns Object containing CSS class names for component styling
+*/
+const useStyles = (theme, colorScheme, disabled, hasError) => useMemo(() => {
+	const dropdownArrow = `data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23${theme.colors.text.secondary.replace("#", "")}%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E`;
+	const select = css`
+      width: 100%;
+      padding: ${theme.vars.spacing.unit} calc(${theme.vars.spacing.unit} * 1.5);
+      border: 1px solid ${hasError ? theme.vars.colors.error.main : theme.vars.colors.border};
+      border-radius: ${theme.vars.components?.Field?.root?.borderRadius || theme.vars.borderRadius.medium};
+      font-size: ${theme.vars.typography.fontSizes.md};
+      font-family: ${theme.vars.typography.fontFamily};
+      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;
+      appearance: none;
+      background-image: url('${dropdownArrow}');
+      background-repeat: no-repeat;
+      background-position: right 0.7em top 50%;
+      background-size: 0.65em auto;
+      cursor: ${disabled ? "not-allowed" : "pointer"};
+
+      &: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 {
+        opacity: 0.6;
+        cursor: not-allowed;
+      }
+
+      &:hover:not(:disabled) {
+        border-color: ${hasError ? theme.vars.colors.error.main : theme.vars.colors.primary.main};
+      }
+    `;
+	const selectError = 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;
+      }
+
+      &:hover:not(:disabled) {
+        border-color: ${theme.vars.colors.error.main};
+      }
+    `;
+	const selectDisabled = css`
+      background-color: ${theme.vars.colors.background.disabled};
+      opacity: 0.6;
+      cursor: not-allowed;
+    `;
+	return {
+		option: css`
+      padding: calc(${theme.vars.spacing.unit} / 2) ${theme.vars.spacing.unit};
+      color: ${theme.vars.colors.text.primary};
+      background-color: ${theme.vars.colors.background.surface};
+
+      &:hover {
+        background-color: ${theme.vars.colors.action.hover};
+      }
+
+      &:checked {
+        background-color: ${theme.vars.colors.primary.main};
+        color: ${theme.vars.colors.primary.contrastText};
+      }
+    `,
+		select,
+		selectDisabled,
+		selectError
+	};
+}, [
+	theme,
+	colorScheme,
+	disabled,
+	hasError
+]);
+var Select_styles_default = useStyles;
+
+//#endregion
+export { Select_styles_default as default };
+//# sourceMappingURL=Select.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.styles.js","names":["select: string","selectError: string","selectDisabled: string"],"sources":["../../../../src/components/primitives/Select/Select.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\n/**\n * Creates styles for the Select 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 * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (theme: Theme, colorScheme: string, disabled: boolean, hasError: boolean): Record<string, string> =>\n  useMemo(() => {\n    const dropdownArrowColor: string = theme.colors.text.secondary.replace('#', '');\n    const dropdownArrow = `data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23${dropdownArrowColor}%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E`;\n\n    const select: string = css`\n      width: 100%;\n      padding: ${theme.vars.spacing.unit} calc(${theme.vars.spacing.unit} * 1.5);\n      border: 1px 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      font-size: ${theme.vars.typography.fontSizes.md};\n      font-family: ${theme.vars.typography.fontFamily};\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      appearance: none;\n      background-image: url('${dropdownArrow}');\n      background-repeat: no-repeat;\n      background-position: right 0.7em top 50%;\n      background-size: 0.65em auto;\n      cursor: ${disabled ? 'not-allowed' : 'pointer'};\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        opacity: 0.6;\n        cursor: not-allowed;\n      }\n\n      &:hover:not(:disabled) {\n        border-color: ${hasError ? theme.vars.colors.error.main : theme.vars.colors.primary.main};\n      }\n    `;\n\n    const selectError: 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      &:hover:not(:disabled) {\n        border-color: ${theme.vars.colors.error.main};\n      }\n    `;\n\n    const selectDisabled: string = css`\n      background-color: ${theme.vars.colors.background.disabled};\n      opacity: 0.6;\n      cursor: not-allowed;\n    `;\n\n    const option: string = css`\n      padding: calc(${theme.vars.spacing.unit} / 2) ${theme.vars.spacing.unit};\n      color: ${theme.vars.colors.text.primary};\n      background-color: ${theme.vars.colors.background.surface};\n\n      &:hover {\n        background-color: ${theme.vars.colors.action.hover};\n      }\n\n      &:checked {\n        background-color: ${theme.vars.colors.primary.main};\n        color: ${theme.vars.colors.primary.contrastText};\n      }\n    `;\n\n    return {\n      option,\n      select,\n      selectDisabled,\n      selectError,\n    };\n  }, [theme, colorScheme, disabled, hasError]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;AA8BA,MAAM,aAAa,OAAc,aAAqB,UAAmB,aACvE,cAAc;CAEZ,MAAM,gBAAgB,yKADa,MAAM,OAAO,KAAK,UAAU,QAAQ,KAAK,GAAG,CACmI;CAElN,MAAMA,SAAiB,GAAG;;iBAEb,MAAM,KAAK,QAAQ,KAAK,QAAQ,MAAM,KAAK,QAAQ,KAAK;0BAC/C,WAAW,MAAM,KAAK,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO,OAAO;uBACtE,MAAM,KAAK,YAAY,OAAO,MAAM,gBAAgB,MAAM,KAAK,aAAa,OAAO;mBACvF,MAAM,KAAK,WAAW,UAAU,GAAG;qBACjC,MAAM,KAAK,WAAW,WAAW;eACvC,MAAM,KAAK,OAAO,KAAK,QAAQ;0BACpB,WAAW,MAAM,KAAK,OAAO,WAAW,WAAW,MAAM,KAAK,OAAO,WAAW,QAAQ;;;;;;+BAMnF,cAAc;;;;gBAI7B,WAAW,gBAAgB,UAAU;;;wBAG7B,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;;;;;;;;;wBAS/F,WAAW,MAAM,KAAK,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO,QAAQ,KAAK;;;CAI7F,MAAMC,cAAsB,GAAG;sBACb,MAAM,KAAK,OAAO,MAAM,KAAK;;;wBAG3B,MAAM,KAAK,OAAO,MAAM,KAAK;gCACrB,MAAM,KAAK,OAAO,MAAM,KAAK;;;;wBAIrC,MAAM,KAAK,OAAO,MAAM,KAAK;;;CAIjD,MAAMC,iBAAyB,GAAG;0BACZ,MAAM,KAAK,OAAO,WAAW,SAAS;;;;AAoB5D,QAAO;EACL,QAhBqB,GAAG;sBACR,MAAM,KAAK,QAAQ,KAAK,QAAQ,MAAM,KAAK,QAAQ,KAAK;eAC/D,MAAM,KAAK,OAAO,KAAK,QAAQ;0BACpB,MAAM,KAAK,OAAO,WAAW,QAAQ;;;4BAGnC,MAAM,KAAK,OAAO,OAAO,MAAM;;;;4BAI/B,MAAM,KAAK,OAAO,QAAQ,KAAK;iBAC1C,MAAM,KAAK,OAAO,QAAQ,aAAa;;;EAMlD;EACA;EACA;EACD;GACA;CAAC;CAAO;CAAa;CAAU;CAAS,CAAC;AAE9C,4BAAe"}

package/dist/components/primitives/Spinner/Spinner.js

@@ -0,0 +1,37 @@
+import useTheme_default from "../../../contexts/Theme/useTheme.js";
+import Spinner_styles_default from "./Spinner.styles.js";
+import { bem, withVendorCSSClassPrefix } from "@thunderid/browser";
+import { jsx } from "react/jsx-runtime";
+import { cx } from "@emotion/css";
+
+//#region src/components/primitives/Spinner/Spinner.tsx
+/**
+* Spinner component for loading states
+*
+* @example
+* ```tsx
+* // Basic spinner
+* <Spinner />
+*
+* // Large spinner with custom color
+* <Spinner size="large" color="#3b82f6" />
+*
+* // Small spinner
+* <Spinner size="small" />
+* ```
+*/
+const Spinner = ({ size = "medium", color, className, style }) => {
+	const { theme, colorScheme } = useTheme_default();
+	const styles = Spinner_styles_default(theme, colorScheme, size, color);
+	return /* @__PURE__ */ jsx("span", {
+		className: cx(withVendorCSSClassPrefix(bem("spinner")), styles["spinner"], size === "small" && styles["spinnerSmall"], size === "medium" && styles["spinnerMedium"], size === "large" && styles["spinnerLarge"], className),
+		style,
+		role: "status",
+		"aria-label": "Loading"
+	});
+};
+var Spinner_default = Spinner;
+
+//#endregion
+export { Spinner_default as default };
+//# sourceMappingURL=Spinner.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.js","names":["Spinner: FC<SpinnerProps>","useTheme","styles: Record<string, string>","useStyles"],"sources":["../../../../src/components/primitives/Spinner/Spinner.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 {FC, CSSProperties} from 'react';\nimport useStyles from './Spinner.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\n\nexport type SpinnerSize = 'small' | 'medium' | 'large';\n\nexport interface SpinnerProps {\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n  /**\n   * Custom color for the spinner\n   */\n  color?: string;\n  /**\n   * Size of the spinner\n   */\n  size?: SpinnerSize;\n  /**\n   * Custom styles\n   */\n  style?: CSSProperties;\n}\n\n/**\n * Spinner component for loading states\n *\n * @example\n * ```tsx\n * // Basic spinner\n * <Spinner />\n *\n * // Large spinner with custom color\n * <Spinner size=\"large\" color=\"#3b82f6\" />\n *\n * // Small spinner\n * <Spinner size=\"small\" />\n * ```\n */\nconst Spinner: FC<SpinnerProps> = ({size = 'medium', color, className, style}: SpinnerProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const styles: Record<string, string> = useStyles(theme, colorScheme, size, color);\n\n  const spinnerClassName: string = cx(\n    withVendorCSSClassPrefix(bem('spinner')),\n    styles['spinner'],\n    size === 'small' && styles['spinnerSmall'],\n    size === 'medium' && styles['spinnerMedium'],\n    size === 'large' && styles['spinnerLarge'],\n    className,\n  );\n\n  return <span className={spinnerClassName} style={style} role=\"status\" aria-label=\"Loading\" />;\n};\n\nexport default Spinner;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA4DA,MAAMA,WAA6B,EAAC,OAAO,UAAU,OAAO,WAAW,YAAyB;CAC9F,MAAM,EAAC,OAAO,gBAA4CC,kBAAU;CACpE,MAAMC,SAAiCC,uBAAU,OAAO,aAAa,MAAM,MAAM;AAWjF,QAAO,oBAAC;EAAK,WAToB,GAC/B,yBAAyB,IAAI,UAAU,CAAC,EACxC,OAAO,YACP,SAAS,WAAW,OAAO,iBAC3B,SAAS,YAAY,OAAO,kBAC5B,SAAS,WAAW,OAAO,iBAC3B,UACD;EAEgD;EAAO,MAAK;EAAS,cAAW;GAAY;;AAG/F,sBAAe"}

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

@@ -0,0 +1,64 @@
+import { useMemo } from "react";
+import { css, keyframes } from "@emotion/css";
+
+//#region src/components/primitives/Spinner/Spinner.styles.ts
+/**
+* Creates styles for the Spinner 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 spinner
+* @param color - The color of the spinner
+* @returns Object containing CSS class names for component styling
+*/
+const useStyles = (theme, colorScheme, size, color) => useMemo(() => {
+	const spinnerColor = color || theme.vars.colors.primary.main;
+	const spinnerSizes = {
+		large: "32px",
+		medium: "20px",
+		small: "16px"
+	};
+	const spinnerSize = spinnerSizes[size];
+	const spinner = css`
+      width: ${spinnerSize};
+      height: ${spinnerSize};
+      border: 2px solid transparent;
+      border-top: 2px solid ${spinnerColor};
+      border-radius: 50%;
+      animation: ${keyframes`
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(360deg);
+      }
+    `} 1s linear infinite;
+      display: inline-block;
+    `;
+	const spinnerSmall = css`
+      width: ${spinnerSizes["small"]};
+      height: ${spinnerSizes["small"]};
+    `;
+	const spinnerMedium = css`
+      width: ${spinnerSizes["medium"]};
+      height: ${spinnerSizes["medium"]};
+    `;
+	return {
+		spinner,
+		spinnerLarge: css`
+      width: ${spinnerSizes["large"]};
+      height: ${spinnerSizes["large"]};
+    `,
+		spinnerMedium,
+		spinnerSmall
+	};
+}, [
+	theme,
+	colorScheme,
+	size,
+	color
+]);
+var Spinner_styles_default = useStyles;
+
+//#endregion
+export { Spinner_styles_default as default };
+//# sourceMappingURL=Spinner.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.styles.js","names":["spinnerColor: string","spinnerSizes: Record<string, string>","spinnerSize: string","spinner: string","spinnerSmall: string","spinnerMedium: string"],"sources":["../../../../src/components/primitives/Spinner/Spinner.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, keyframes} from '@emotion/css';\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\n\nexport type SpinnerSize = 'small' | 'medium' | 'large';\n\n/**\n * Creates styles for the Spinner 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 spinner\n * @param color - The color of the spinner\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (theme: Theme, colorScheme: string, size: SpinnerSize, color?: string): Record<string, string> =>\n  useMemo(() => {\n    const spinnerColor: string = color || theme.vars.colors.primary.main;\n\n    const spinnerSizes: Record<string, string> = {\n      large: '32px',\n      medium: '20px',\n      small: '16px',\n    };\n\n    const spinnerSize: string = spinnerSizes[size];\n\n    const spinAnimation: string = keyframes`\n      0% {\n        transform: rotate(0deg);\n      }\n      100% {\n        transform: rotate(360deg);\n      }\n    `;\n\n    const spinner: string = css`\n      width: ${spinnerSize};\n      height: ${spinnerSize};\n      border: 2px solid transparent;\n      border-top: 2px solid ${spinnerColor};\n      border-radius: 50%;\n      animation: ${spinAnimation} 1s linear infinite;\n      display: inline-block;\n    `;\n\n    const spinnerSmall: string = css`\n      width: ${spinnerSizes['small']};\n      height: ${spinnerSizes['small']};\n    `;\n\n    const spinnerMedium: string = css`\n      width: ${spinnerSizes['medium']};\n      height: ${spinnerSizes['medium']};\n    `;\n\n    const spinnerLarge: string = css`\n      width: ${spinnerSizes['large']};\n      height: ${spinnerSizes['large']};\n    `;\n\n    return {\n      spinner,\n      spinnerLarge,\n      spinnerMedium,\n      spinnerSmall,\n    };\n  }, [theme, colorScheme, size, color]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;AAgCA,MAAM,aAAa,OAAc,aAAqB,MAAmB,UACvE,cAAc;CACZ,MAAMA,eAAuB,SAAS,MAAM,KAAK,OAAO,QAAQ;CAEhE,MAAMC,eAAuC;EAC3C,OAAO;EACP,QAAQ;EACR,OAAO;EACR;CAED,MAAMC,cAAsB,aAAa;CAWzC,MAAMC,UAAkB,GAAG;eAChB,YAAY;gBACX,YAAY;;8BAEE,aAAa;;mBAbT,SAAS;;;;;;;MAeV;;;CAI7B,MAAMC,eAAuB,GAAG;eACrB,aAAa,SAAS;gBACrB,aAAa,SAAS;;CAGlC,MAAMC,gBAAwB,GAAG;eACtB,aAAa,UAAU;gBACtB,aAAa,UAAU;;AAQnC,QAAO;EACL;EACA,cAP2B,GAAG;eACrB,aAAa,SAAS;gBACrB,aAAa,SAAS;;EAMhC;EACA;EACD;GACA;CAAC;CAAO;CAAa;CAAM;CAAM,CAAC;AAEvC,6BAAe"}

package/dist/components/primitives/TextField/TextField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/TextField/TextField.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAIH,OAAO,EAAC,EAAE,EAAE,mBAAmB,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAMzD,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,WAAW,CAAC;IAC9F;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAED,QAAA,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAmFjC,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/TextField/TextField.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAIH,OAAO,EAAC,EAAE,EAAE,mBAAmB,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAMzD,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,WAAW,CAAC;IAC9F;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAED,QAAA,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CA0FjC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/components/primitives/TextField/TextField.js

@@ -0,0 +1,62 @@
+import useTheme_default from "../../../contexts/Theme/useTheme.js";
+import FormControl_default from "../FormControl/FormControl.js";
+import InputLabel_default from "../InputLabel/InputLabel.js";
+import TextField_styles_default from "./TextField.styles.js";
+import { bem, withVendorCSSClassPrefix } from "@thunderid/browser";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@emotion/css";
+
+//#region src/components/primitives/TextField/TextField.tsx
+const TextField = ({ label, error, required, className, disabled, helperText, startIcon, endIcon, onStartIconClick, onEndIconClick, type = "text", style = {},...rest }) => {
+	const { theme, colorScheme } = useTheme_default();
+	const hasError = !!error;
+	const styles = TextField_styles_default(theme, colorScheme, disabled ?? false, hasError, !!startIcon, !!endIcon);
+	const inputClassName = cx(withVendorCSSClassPrefix(bem("text-field", "input")), styles["input"], hasError && styles["inputError"], disabled && styles["inputDisabled"]);
+	const containerClassName = cx(withVendorCSSClassPrefix(bem("text-field", "container")), styles["inputContainer"]);
+	const startIconClassName = cx(withVendorCSSClassPrefix(bem("text-field", "start-icon")), styles["startIcon"]);
+	const endIconClassName = cx(withVendorCSSClassPrefix(bem("text-field", "end-icon")), styles["endIcon"]);
+	return /* @__PURE__ */ jsxs(FormControl_default, {
+		error,
+		helperText,
+		className: cx(withVendorCSSClassPrefix(bem("text-field")), className),
+		style,
+		children: [label && /* @__PURE__ */ jsx(InputLabel_default, {
+			required,
+			error: hasError,
+			children: label
+		}), /* @__PURE__ */ jsxs("div", {
+			className: containerClassName,
+			children: [
+				startIcon && /* @__PURE__ */ jsx("div", {
+					className: startIconClassName,
+					onClick: onStartIconClick,
+					role: onStartIconClick ? "button" : void 0,
+					tabIndex: onStartIconClick && !disabled ? 0 : void 0,
+					"aria-label": "Start icon",
+					children: startIcon
+				}),
+				/* @__PURE__ */ jsx("input", {
+					className: inputClassName,
+					type,
+					disabled,
+					"aria-invalid": hasError,
+					"aria-required": required,
+					...rest
+				}),
+				endIcon && /* @__PURE__ */ jsx("div", {
+					className: endIconClassName,
+					onClick: onEndIconClick,
+					role: onEndIconClick ? "button" : void 0,
+					tabIndex: onEndIconClick && !disabled ? 0 : void 0,
+					"aria-label": "End icon",
+					children: endIcon
+				})
+			]
+		})]
+	});
+};
+var TextField_default = TextField;
+
+//#endregion
+export { TextField_default as default };
+//# sourceMappingURL=TextField.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextField.js","names":["TextField: FC<TextFieldProps>","useTheme","styles: Record<string, string>","useStyles","inputClassName: string","containerClassName: string","startIconClassName: string","endIconClassName: string","FormControl","InputLabel"],"sources":["../../../../src/components/primitives/TextField/TextField.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 {FC, InputHTMLAttributes, ReactNode} from 'react';\nimport useStyles from './TextField.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport FormControl from '../FormControl/FormControl';\nimport InputLabel from '../InputLabel/InputLabel';\n\nexport interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className'> {\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 the input\n   */\n  endIcon?: ReactNode;\n  /**\n   * Error message to display below the input\n   */\n  error?: string;\n  /**\n   * Helper text to display below the input\n   */\n  helperText?: string;\n  /**\n   * Label text to display above the input\n   */\n  label?: string;\n  /**\n   * Click handler for the end icon\n   */\n  onEndIconClick?: () => void;\n  /**\n   * Click handler for the start icon\n   */\n  onStartIconClick?: () => void;\n  /**\n   * Whether the field is required\n   */\n  required?: boolean;\n  /**\n   * Icon to display at the start (left) of the input\n   */\n  startIcon?: ReactNode;\n}\n\nconst TextField: FC<TextFieldProps> = ({\n  label,\n  error,\n  required,\n  className,\n  disabled,\n  helperText,\n  startIcon,\n  endIcon,\n  onStartIconClick,\n  onEndIconClick,\n  type = 'text',\n  style = {},\n  ...rest\n}: TextFieldProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const hasError = !!error;\n  const hasStartIcon = !!startIcon;\n  const hasEndIcon = !!endIcon;\n  const styles: Record<string, string> = useStyles(\n    theme,\n    colorScheme,\n    disabled ?? false,\n    hasError,\n    hasStartIcon,\n    hasEndIcon,\n  );\n\n  const inputClassName: string = cx(\n    withVendorCSSClassPrefix(bem('text-field', 'input')),\n    styles['input'],\n    hasError && styles['inputError'],\n    disabled && styles['inputDisabled'],\n  );\n\n  const containerClassName: string = cx(\n    withVendorCSSClassPrefix(bem('text-field', 'container')),\n    styles['inputContainer'],\n  );\n\n  const startIconClassName: string = cx(withVendorCSSClassPrefix(bem('text-field', 'start-icon')), styles['startIcon']);\n\n  const endIconClassName: string = cx(withVendorCSSClassPrefix(bem('text-field', 'end-icon')), styles['endIcon']);\n\n  return (\n    <FormControl\n      error={error}\n      helperText={helperText}\n      className={cx(withVendorCSSClassPrefix(bem('text-field')), className)}\n      style={style}\n    >\n      {label && (\n        <InputLabel required={required} error={hasError}>\n          {label}\n        </InputLabel>\n      )}\n      <div className={containerClassName}>\n        {startIcon && (\n          <div\n            className={startIconClassName}\n            onClick={onStartIconClick}\n            role={onStartIconClick ? 'button' : undefined}\n            tabIndex={onStartIconClick && !disabled ? 0 : undefined}\n            aria-label=\"Start icon\"\n          >\n            {startIcon}\n          </div>\n        )}\n        <input\n          className={inputClassName}\n          type={type}\n          disabled={disabled}\n          aria-invalid={hasError}\n          aria-required={required}\n          {...rest}\n        />\n        {endIcon && (\n          <div\n            className={endIconClassName}\n            onClick={onEndIconClick}\n            role={onEndIconClick ? 'button' : undefined}\n            tabIndex={onEndIconClick && !disabled ? 0 : undefined}\n            aria-label=\"End icon\"\n          >\n            {endIcon}\n          </div>\n        )}\n      </div>\n    </FormControl>\n  );\n};\n\nexport default TextField;\n"],"mappings":";;;;;;;;;AAqEA,MAAMA,aAAiC,EACrC,OACA,OACA,UACA,WACA,UACA,YACA,WACA,SACA,kBACA,gBACA,OAAO,QACP,QAAQ,EAAE,CACV,GAAG,WACiB;CACpB,MAAM,EAAC,OAAO,gBAA4CC,kBAAU;CACpE,MAAM,WAAW,CAAC,CAAC;CAGnB,MAAMC,SAAiCC,yBACrC,OACA,aACA,YAAY,OACZ,UANmB,CAAC,CAAC,WACJ,CAAC,CAAC,QAQpB;CAED,MAAMC,iBAAyB,GAC7B,yBAAyB,IAAI,cAAc,QAAQ,CAAC,EACpD,OAAO,UACP,YAAY,OAAO,eACnB,YAAY,OAAO,iBACpB;CAED,MAAMC,qBAA6B,GACjC,yBAAyB,IAAI,cAAc,YAAY,CAAC,EACxD,OAAO,kBACR;CAED,MAAMC,qBAA6B,GAAG,yBAAyB,IAAI,cAAc,aAAa,CAAC,EAAE,OAAO,aAAa;CAErH,MAAMC,mBAA2B,GAAG,yBAAyB,IAAI,cAAc,WAAW,CAAC,EAAE,OAAO,WAAW;AAE/G,QACE,qBAACC;EACQ;EACK;EACZ,WAAW,GAAG,yBAAyB,IAAI,aAAa,CAAC,EAAE,UAAU;EAC9D;aAEN,SACC,oBAACC;GAAqB;GAAU,OAAO;aACpC;IACU,EAEf,qBAAC;GAAI,WAAW;;IACb,aACC,oBAAC;KACC,WAAW;KACX,SAAS;KACT,MAAM,mBAAmB,WAAW;KACpC,UAAU,oBAAoB,CAAC,WAAW,IAAI;KAC9C,cAAW;eAEV;MACG;IAER,oBAAC;KACC,WAAW;KACL;KACI;KACV,gBAAc;KACd,iBAAe;KACf,GAAI;MACJ;IACD,WACC,oBAAC;KACC,WAAW;KACX,SAAS;KACT,MAAM,iBAAiB,WAAW;KAClC,UAAU,kBAAkB,CAAC,WAAW,IAAI;KAC5C,cAAW;eAEV;MACG;;IAEJ;GACM;;AAIlB,wBAAe"}

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

@@ -0,0 +1,129 @@
+import { useMemo } from "react";
+import { css } from "@emotion/css";
+
+//#region src/components/primitives/TextField/TextField.styles.ts
+/**
+* Creates styles for the TextField 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 hasStartIcon - Whether the component has a start icon
+* @param hasEndIcon - Whether the component has an end icon
+* @returns Object containing CSS class names for component styling
+*/
+const useStyles = (theme, colorScheme, disabled, hasError, hasStartIcon, hasEndIcon) => useMemo(() => {
+	const inlineStartPadding = hasStartIcon ? `calc(${theme.vars.spacing.unit} * 5)` : `calc(${theme.vars.spacing.unit} * 1.5)`;
+	const inlineEndPadding = hasEndIcon ? `calc(${theme.vars.spacing.unit} * 5)` : `calc(${theme.vars.spacing.unit} * 1.5)`;
+	const inputContainer = css`
+      position: relative;
+      display: flex;
+      align-items: center;
+    `;
+	const input = css`
+      width: 100%;
+      padding-block: ${theme.vars.spacing.unit};
+      padding-inline-start: ${inlineStartPadding};
+      padding-inline-end: ${inlineEndPadding};
+      border: 1px solid ${hasError ? theme.vars.colors.error.main : theme.vars.colors.border};
+      border-radius: ${theme.vars.components?.Field?.root?.borderRadius || theme.vars.borderRadius.medium};
+      font-size: ${theme.vars.typography.fontSizes.md};
+      font-family: ${theme.vars.typography.fontFamily};
+      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 {
+        opacity: 0.6;
+        cursor: not-allowed;
+      }
+
+      &:hover:not(:disabled) {
+        border-color: ${hasError ? theme.vars.colors.error.main : theme.vars.colors.primary.main};
+      }
+
+      &::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;
+      }
+
+      &:hover:not(:disabled) {
+        border-color: ${theme.vars.colors.error.main};
+      }
+    `;
+	const inputDisabled = css`
+      background-color: ${theme.vars.colors.background.disabled};
+      opacity: 0.6;
+      cursor: not-allowed;
+    `;
+	const icon = css`
+      position: absolute;
+      background: none;
+      border: none;
+      cursor: ${disabled ? "not-allowed" : "pointer"};
+      padding: calc(${theme.vars.spacing.unit} / 2);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: ${theme.vars.colors.text.secondary};
+      opacity: ${disabled ? .5 : 1};
+      top: 50%;
+      transform: translateY(-50%);
+      transition:
+        color 0.2s ease,
+        opacity 0.2s ease;
+
+      &:hover:not(:disabled) {
+        color: ${theme.vars.colors.text.primary};
+      }
+
+      &:focus {
+        outline: 2px solid ${theme.vars.colors.primary.main};
+        outline-offset: 2px;
+      }
+    `;
+	const startIcon = css`
+      ${icon};
+      inset-inline-start: ${theme.vars.spacing.unit};
+    `;
+	return {
+		endIcon: css`
+      ${icon};
+      inset-inline-end: ${theme.vars.spacing.unit};
+    `,
+		icon,
+		input,
+		inputContainer,
+		inputDisabled,
+		inputError,
+		startIcon
+	};
+}, [
+	theme,
+	colorScheme,
+	disabled,
+	hasError,
+	hasStartIcon,
+	hasEndIcon
+]);
+var TextField_styles_default = useStyles;
+
+//#endregion
+export { TextField_styles_default as default };
+//# sourceMappingURL=TextField.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextField.styles.js","names":["inlineStartPadding: string","inlineEndPadding: string","inputContainer: string","input: string","inputError: string","inputDisabled: string","icon: string","startIcon: string"],"sources":["../../../../src/components/primitives/TextField/TextField.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\n/**\n * Creates styles for the TextField 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 hasStartIcon - Whether the component has a start icon\n * @param hasEndIcon - Whether the component has an end icon\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  hasStartIcon: boolean,\n  hasEndIcon: boolean,\n): Record<string, string> =>\n  useMemo(() => {\n    const inlineStartPadding: string = hasStartIcon\n      ? `calc(${theme.vars.spacing.unit} * 5)`\n      : `calc(${theme.vars.spacing.unit} * 1.5)`;\n    const inlineEndPadding: string = hasEndIcon\n      ? `calc(${theme.vars.spacing.unit} * 5)`\n      : `calc(${theme.vars.spacing.unit} * 1.5)`;\n\n    const inputContainer: string = css`\n      position: relative;\n      display: flex;\n      align-items: center;\n    `;\n\n    const input: string = css`\n      width: 100%;\n      padding-block: ${theme.vars.spacing.unit};\n      padding-inline-start: ${inlineStartPadding};\n      padding-inline-end: ${inlineEndPadding};\n      border: 1px 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      font-size: ${theme.vars.typography.fontSizes.md};\n      font-family: ${theme.vars.typography.fontFamily};\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        opacity: 0.6;\n        cursor: not-allowed;\n      }\n\n      &:hover:not(:disabled) {\n        border-color: ${hasError ? theme.vars.colors.error.main : theme.vars.colors.primary.main};\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      &:hover:not(:disabled) {\n        border-color: ${theme.vars.colors.error.main};\n      }\n    `;\n\n    const inputDisabled: string = css`\n      background-color: ${theme.vars.colors.background.disabled};\n      opacity: 0.6;\n      cursor: not-allowed;\n    `;\n\n    const icon: string = css`\n      position: absolute;\n      background: none;\n      border: none;\n      cursor: ${disabled ? 'not-allowed' : 'pointer'};\n      padding: calc(${theme.vars.spacing.unit} / 2);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      color: ${theme.vars.colors.text.secondary};\n      opacity: ${disabled ? 0.5 : 1};\n      top: 50%;\n      transform: translateY(-50%);\n      transition:\n        color 0.2s ease,\n        opacity 0.2s ease;\n\n      &:hover:not(:disabled) {\n        color: ${theme.vars.colors.text.primary};\n      }\n\n      &:focus {\n        outline: 2px solid ${theme.vars.colors.primary.main};\n        outline-offset: 2px;\n      }\n    `;\n\n    const startIcon: string = css`\n      ${icon};\n      inset-inline-start: ${theme.vars.spacing.unit};\n    `;\n\n    const endIcon: string = css`\n      ${icon};\n      inset-inline-end: ${theme.vars.spacing.unit};\n    `;\n\n    return {\n      endIcon,\n      icon,\n      input,\n      inputContainer,\n      inputDisabled,\n      inputError,\n      startIcon,\n    };\n  }, [theme, colorScheme, disabled, hasError, hasStartIcon, hasEndIcon]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;;AAgCA,MAAM,aACJ,OACA,aACA,UACA,UACA,cACA,eAEA,cAAc;CACZ,MAAMA,qBAA6B,eAC/B,QAAQ,MAAM,KAAK,QAAQ,KAAK,SAChC,QAAQ,MAAM,KAAK,QAAQ,KAAK;CACpC,MAAMC,mBAA2B,aAC7B,QAAQ,MAAM,KAAK,QAAQ,KAAK,SAChC,QAAQ,MAAM,KAAK,QAAQ,KAAK;CAEpC,MAAMC,iBAAyB,GAAG;;;;;CAMlC,MAAMC,QAAgB,GAAG;;uBAEN,MAAM,KAAK,QAAQ,KAAK;8BACjB,mBAAmB;4BACrB,iBAAiB;0BACnB,WAAW,MAAM,KAAK,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO,OAAO;uBACtE,MAAM,KAAK,YAAY,OAAO,MAAM,gBAAgB,MAAM,KAAK,aAAa,OAAO;mBACvF,MAAM,KAAK,WAAW,UAAU,GAAG;qBACjC,MAAM,KAAK,WAAW,WAAW;eACvC,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;;;;;;;;;wBAS/F,WAAW,MAAM,KAAK,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO,QAAQ,KAAK;;;;iBAIhF,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;;;;wBAIrC,MAAM,KAAK,OAAO,MAAM,KAAK;;;CAIjD,MAAMC,gBAAwB,GAAG;0BACX,MAAM,KAAK,OAAO,WAAW,SAAS;;;;CAK5D,MAAMC,OAAe,GAAG;;;;gBAIZ,WAAW,gBAAgB,UAAU;sBAC/B,MAAM,KAAK,QAAQ,KAAK;;;;eAI/B,MAAM,KAAK,OAAO,KAAK,UAAU;iBAC/B,WAAW,KAAM,EAAE;;;;;;;;iBAQnB,MAAM,KAAK,OAAO,KAAK,QAAQ;;;;6BAInB,MAAM,KAAK,OAAO,QAAQ,KAAK;;;;CAKxD,MAAMC,YAAoB,GAAG;QACzB,KAAK;4BACe,MAAM,KAAK,QAAQ,KAAK;;AAQhD,QAAO;EACL,SANsB,GAAG;QACvB,KAAK;0BACa,MAAM,KAAK,QAAQ,KAAK;;EAK5C;EACA;EACA;EACA;EACA;EACA;EACD;GACA;CAAC;CAAO;CAAa;CAAU;CAAU;CAAc;CAAW,CAAC;AAExE,+BAAe"}