cynx-lib 1.3.32 → 1.3.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cynx-lib",
-  "version": "1.3.32",
+  "version": "1.3.33",
   "type": "module",
   "main": "./index.js",
   "exports": {

package/ui/components/Input.jsx

@@ -13,6 +13,7 @@ export default function Input({
   hint,
   error,
   size = 'md',
+  type = 'text',
   icon,
   iconRight,
   clearable = false,
@@ -29,6 +30,18 @@ export default function Input({
   const [hovered, setHovered] = useState(false);
   const s = SIZES[size] || SIZES.md;
 
+  const isPasswd = type === 'passwd';
+  const resolvedType = isPasswd ? 'text' : type;
+  const hasValue = value !== undefined && value !== null && value !== '';
+
+  const passwdStyle = isPasswd ? {
+    WebkitTextSecurity: 'disc',
+    textSecurity: 'disc',
+    fontFamily: hasValue ? 'monospace' : 'var(--f,var(--sans,inherit))',
+    fontWeight: hasValue ? 700 : 'normal',
+    letterSpacing: hasValue ? '0.15em' : 'normal',
+  } : {};
+
   function handleClear() {
     if (props.onChange) props.onChange({ target: { value: '' } });
     if (onClear) onClear();
@@ -137,6 +150,7 @@ export default function Input({
         ) : (
         <input
           ref={inputRef}
+          type={resolvedType}
           className={className}
           style={{
             display: 'block',
@@ -160,6 +174,7 @@ export default function Input({
               : 'var(--shadow,0 1px 3px rgba(20,22,41,.1))',
             opacity: props.disabled ? 0.5 : 1,
             cursor: props.disabled ? 'not-allowed' : undefined,
+            ...passwdStyle,
             ...style,
           }}
           value={value}